如何打开Chrome扩展程序弹出窗口?

时间:2018-08-22 21:28:33

标签: javascript google-chrome google-chrome-extension google-chrome-devtools

我正在制作chrome扩展程序,如果客户在特定页面上,我希望打开弹出窗口(就像用户在浏览器中单击了我的扩展程序图标一样。)

这可能吗?以下似乎无效:

chrome.browserAction.setPopup({
    "tabId": tabId, "popup": "popup.html"
});

如何使我的弹出窗口展开并显示?

1 个答案:

答案 0 :(得分:-1)

源代码:

<html>
      <head>
        <style>
          body {
          font-family: sans-serif;
          font-weight: 300;
          line-height: 1.42em;
          color: #A7A1AE;
          background-color: #1F2739;
          }
          h1 {
          font-size: 3em; 
          font-weight: 300;
          line-height: 1em;
          text-align: center;
          color: #4DC3FA;
          }
          h2 {
          font-size: 1em; 
          font-weight: 300;
          text-align: center;
          display: block;
          line-height: 1em;
          padding-bottom: 2em;
          color: #FB667A;
          }
          h2 a {
          font-weight: 700;
          text-transform: uppercase;
          color: #FB667A;
          text-decoration: none;
          }
          p {
          padding-left: 10px;
          padding-right: 10px;
          }
    /*--------------------- Table-------------------------------------------------- */
          .container {
          text-align: left;
          overflow: hidden;
          width: 75%;
          margin: 0 auto;
          display: table;
          padding: 0 0 8em 0;
          }
          .container td, .container th {
          padding-bottom: 2%;
          padding-top: 2%;
          padding-left: 2%;  
          }
          .container tr:nth-child(odd) {
          background-color: #323C50;
          }
          .container tr:nth-child(even) {
          background-color: #2C3446;
          }
          .container th {
          background-color: #1F2739;
          font-size: 30px;
          }
          .container td:hover {
          background-color: #FFF842;
          color: #403E10;
          font-weight: bold;
          }
    /*--------------------- Table-------------------------------------------------- */
    /*--------------------- Popup-------------------------------------------------- */
          .popup {
          height: 100%;
          width: 0;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
          background-color: #111;
          overflow-x: hidden;
          transition: 1s;
          padding-top: 10px;
          text-align: justify;
          }
          .popup a {
          padding: 8px 8px 8px 32px;
          text-decoration: none;
          font-size: 25px;
          color: #818181;
          display: block;
          transition: 0.3s;
          }
          .popup a:hover {
          color: #f1f1f1;
          }
          .popup .closebtn {
          position: absolute;
          top: 0;
          right: 25px;
          font-size: 36px;
          margin-left: 50px;
          }
          @media screen and (max-height: 450px) {
          .sidenav {
          padding-top: 15px;
          }
          .sidenav a {
          font-size: 18px;
          }
          }
    /*--------------------- Popup-------------------------------------------------- */
        </style>
      </head>
      <body>
        <table class="container">
          <tr>
            <th colspan="3">Table</th>
          </tr>
          <tr>
            <td width="30px" style="cursor:pointer;" onclick="openPop1()">&plus;</td>
              <script>
                function openPop1() {
                  document.getElementById("myPopup1").style.width = "100%";
                  }
                function closePop1() {
                  document.getElementById("myPopup1").style.width = "0";
                  }  
              </script>
              <div id="myPopup1" class="popup">
                <a href="javascript:void(0)"  class="closebtn" onclick="closePop1()">&times;</a> 
                <p>1</p>
              </div>
            <td width="30px">1</td>
            <td>1</td>
          </tr>
          <tr>
            <td style="cursor:pointer;" onclick="openPop2()">&plus;</td>
              <script>
                function openPop2() {
                  document.getElementById("myPopup2").style.width = "100%";
                  }
                function closePop2() {
                  document.getElementById("myPopup2").style.width = "0";
                  }  
              </script>
              <div id="myPopup2" class="popup">
                <a href="javascript:void(0)"  class="closebtn" onclick="closePop2()">&times;</a> 
                <p>2</p>
              </div>
            <td>2</td>
            <td>2</td>
          </tr>
          <tr>
            <td style="cursor:pointer;" onclick="openPop3()">&plus;</td>
              <script>
                function openPop3() {
                  document.getElementById("myPopup3").style.width = "100%";
                  }
                function closePop3() {
                  document.getElementById("myPopup3").style.width = "0";
                  }  
              </script>
              <div id="myPopup3" class="popup">
                <a href="javascript:void(0)"  class="closebtn" onclick="closePop3()">&times;</a> 
                <p>3</p>
              </div>
            <td>3</td>
            <td>3</td>
          </tr>
          <tr>
            <td style="cursor:pointer;" onclick="openPop4()">&plus;</td>
              <script>
                function openPop4() {
                  document.getElementById("myPopup4").style.width = "100%";
                  }
                function closePop4() {
                  document.getElementById("myPopup4").style.width = "0";
                  }  
              </script>
              <div id="myPopup4" class="popup">
                <a href="javascript:void(0)"  class="closebtn" onclick="closePop4()">&times;</a> 
                <p>4</p>
              </div>
            <td>4</td>
            <td>4</td>
          </tr>
          <tr>
            <td style="cursor:pointer;" onclick="openPop5()">&plus;</td>
              <script>
                function openPop5() {
                  document.getElementById("myPopup5").style.width = "100%";
                  }
                function closePop5() {
                  document.getElementById("myPopup5").style.width = "0";
                  }  
              </script>
              <div id="myPopup5" class="popup">
                <a href="javascript:void(0)"  class="closebtn" onclick="closePop5()">&times;</a> 
                <p>5</p>
              </div>
            <td>5</td>
            <td>5</td>
          </tr>
          <tr>
            <td style="cursor:pointer;" onclick="openPop6()">&plus;</td>
              <script>
                function openPop6() {
                  document.getElementById("myPopup6").style.width = "100%";
                  }
                function closePop6() {
                  document.getElementById("myPopup6").style.width = "0";
                  }  
              </script>
              <div id="myPopup6" class="popup">
                <a href="javascript:void(0)"  class="closebtn" onclick="closePop6()">&times;</a> 
                <p>6</p>
              </div>
            <td>6</td>
            <td>6</td>
          </tr>
          <tr>
            <td style="cursor:pointer;" onclick="openPop7()">&plus;</td>
              <script>
                function openPop7() {
                  document.getElementById("myPopup7").style.width = "100%";
                  }
                function closePop7() {
                  document.getElementById("myPopup7").style.width = "0";
                  }  
              </script>
              <div id="myPopup7" class="popup">
                <a href="javascript:void(0)"  class="closebtn" onclick="closePop7()">&times;</a> 
                <p>7</p>
              </div>
            <td>7</td>
            <td>7</td>
          </tr>
          <tr>
            <td style="cursor:pointer;" onclick="openPop8()">&plus;</td>
              <script>
                function openPop8() {
                  document.getElementById("myPopup8").style.width = "100%";
                  }
                function closePop8() {
                  document.getElementById("myPopup8").style.width = "0";
                  }  
              </script>
              <div id="myPopup8" class="popup">
                <a href="javascript:void(0)"  class="closebtn" onclick="closePop8()">&times;</a> 
                <p>8</p>
              </div>
            <td>8</td>
            <td>8</td>
          </tr>
          <tr>
            <td style="cursor:pointer;" onclick="openPop9()">&plus;</td>
              <script>
                function openPop9() {
                  document.getElementById("myPopup9").style.width = "100%";
                  }
                function closePop9() {
                  document.getElementById("myPopup9").style.width = "0";
                  }  
              </script>
              <div id="myPopup9" class="popup">
                <a href="javascript:void(0)"  class="closebtn" onclick="closePop9()">&times;</a> 
                <p>9</p>
              </div>
            <td>9</td>
            <td>9</td>
          </tr>
          <tr>
            <td style="cursor:pointer;" onclick="openPop10()">&plus;</td>
              <script>
                function openPop10() {
                  document.getElementById("myPopup10").style.width = "100%";
                  }
                function closePop10() {
                  document.getElementById("myPopup10").style.width = "0";
                  }  
              </script>
              <div id="myPopup10" class="popup">
                <a href="javascript:void(0)"  class="closebtn" onclick="closePop10()">&times;</a> 
                <p>10</p>
              </div>
            <td>10</td>
            <td>10</td>
          </tr>
        </table>
      </body>
    </html>