javascript - Chrome 扩展程序呈灰色并且不会显示弹出窗口

标签 javascript html google-chrome-extension

我的 Chrome 扩展程序是灰色的,并且不会显示弹出窗口。我试图让它在“https://scratch.mit.edu ”和所有子域上工作,但它在每个站点上都是灰色的。该弹出窗口也不会显示在任何网站上。

ma​​nifest.json:

{
"manifest_version": 2,
"background": {
    "page": "background.html"
},  
"page_action": {
      "default_icon": {
        "19": "images/icon19.png",
        "38": "images/icon38.png"
      },
      "default_title": "Scratch theme loader",
      "default_popup": "popup.html"
    },  
"permissions": [
    "storage",
    "declarativeContent",
    "https://scratch.mit.edu/*",
    "https://pastebin.com/raw/*"
]
}

背景.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Background operation for Scratch Themes</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <script type="text/javascript">
        chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {


      if (tab.url.indexOf('https://scratch.mit.edu') > -1) {
        chrome.pageAction.show(tabId);
      } else {
        chrome.pageAction.hide(tabId);
      }
    });
    </script>
  </body>
</html>

popup.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Scratch Themes</title>
    <style>
      body {
        min-width: 357px;
        overflow-x: hidden;
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      img {
        align: center;
      }
    </style>
  </head>
  <body>
      <ul>
        <li>
            <img src = "images/S_Themes.png">
        </li>
        <li>
            <p>Choose which theme you would like to use:</p>
            <form action="">
              <input type="radio" name="example" value="1"> Example 1<br>
              <input type="radio" name="example" value="2"> Example 2<br>
              <input type="radio" name="example" value="3"> Example 3
            </form>
        </li>
  </body>
</html>

最佳答案

您必须将所有 javascript 代码放在 js 文件中,后台、弹出窗口和其他扩展页面中不允许使用 html 脚本,甚至 onclick 属性也不允许。

关于javascript - Chrome 扩展程序呈灰色并且不会显示弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36246834/

相关文章:

c++ - 启动从主机应用程序到 chrome 扩展程序的消息

javascript - 将对象中的所有数组合并为一个数组。

javascript - AWS Javascript SDK 中回调函数的返回值

javascript - 在 mocha 单元测试中包含模块

css - 如何限制 body 高度到视口(viewport)

javascript - 我应该如何安全地存储密码并在 chrome 扩展中使用 http auth

javascript - 如何在 React 中呈现选中的单选按钮

javascript - 如何使用jquery检查div中的最后一个子元素是否是<img>?

javascript - 删除包含选择列表的 Bootstrap 面板中的所有空格

html - 在指定的 div 中启用滚动?