3

我正在尝试开发一个测试 chrome 扩展来查看 JQuery 如何与 chrome 扩展一起工作。从提供的代码中，我认为它应该将弹出窗口的背景更改为黄色。

我尝试使用内容脚本和背景加载 jquery.js。当我通过后台脚本命令加载它时，它显示 jquery.js 已加载。

这是我的文件：

清单.json

    {
  "name": "Hello World!",
  "version": "1.0",
  "manifest_version": 2,
  "description": "My first Chrome extension.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "js": ["jquery.js", "content.js"]
    }
  ]
}

popup.html

    <html>
  <head>
    <script src='jquery.js'></script>
    <script src='content.js'></script>
  </head>
</html>

内容.js

$('a').css({'background-color': 'yellow'});

我的扩展文件夹中也有 jquery.js。如果有人给我一些其他东西来尝试让它工作，或者可以向我展示一个链接 jquery 的 chrome 扩展的非常好的工作示例，那就太好了！

4

1 回答 1

11

你一直没有把不应该放在一起的东西混在一起。

您做错的一件事：
由于您不希望在单击浏览器操作按钮时出现弹出窗口，因此您不应指定“默认弹出窗口”：

...
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"   // <-- this line should go away
},
...

话虽如此，解决问题的最佳方法（imo）如下：

  1. 让你的 background-page （或者更好的 event-page）监听chrome.browserAction.onClicked事件。
    （请注意，为了触发事件，不必设置默认弹出窗口。）

  2. 发生这种情况时，使用chrome.tabs.executeScript使用编程注入注入jquery.min.js并content.js进入活动选项卡的页面。

  3. 为了使上述步骤成为可能，您还必须声明必要的权限，即您的扩展程序应该可以访问的页面"tabs"的 URL匹配模式"http://*/*"（例如，并且可以使用http和https方案"https://*/*"访问所有页面）。

我还建议仔细查看清单规范，以熟悉可用字段和可能的值。

最后，一些演示源代码可以帮助您入门（我知道所有这些信息可能会让人不知所措）：

扩展文件夹结构：

       _______________LinkHighlighter_______________
      |                      |                      |
manifest.json               img                     js
                             |                      |__background.js
                        icon<XX>.png(*)             |__content.js
                                                    |__jquery.min.js
(*): <XX> = 16, 19, 38, 48, 128

清单.json：

{
    "manifest_version": 2,

    "name": "Link Highlighter",
    "version": "1.0",
    "description": "...",
    "icons": {
         "16": "img/icon16.png",
         "48": "img/icon48.png",
        "128": "img/icon128.png"
    },

    "browser_action": {
        "default_title": "Link Highlighter",
        "default_icon": {
            "19": "img/icon19.png",
            "38": "img/icon38.png"
        }
    },
    "background": {
        "persistent": false,
        "scripts": ["js/background.js"]
    },

    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ]
}

背景.js：

// When the user clicks the browser-action button...
chrome.browserAction.onClicked.addListener(function(tab) {
    // ...inject 'jquery.min.js' and...
    chrome.tabs.executeScript(tab.id, {
        file: "js/jquery.min.js",
        allFrames: true,
        runAt: "document_idle"
    });
    // ...inject 'content.js' into the active tab's page
    chrome.tabs.executeScript(tab.id, {
        file: "js/content.js",
        allFrames: true,
        runAt: "document_idle"
    });
});

内容.js：

$("a").css({ "background-color": "yellow" });

如果您还有其他问题/问题，请随时回来：)

为了完整起见...
...让我提一下，还有其他可能的方法，例如：

  1. 使用页面操作而不是浏览器操作。

  2. 使用您的内容脚本注入每个页面，并通过从背景页面到内容脚本的消息传递来触发突出显示。

于 2013-10-20T13:04:20.077 回答