JQuery 和 Chrome 扩展答案

【问题标题】：JQuery and Chrome ExtensionJQuery 和 Chrome 扩展
【发布时间】：2013-10-27 19:41:15
【问题描述】：

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

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

这是我的文件：

manifest.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>

content.js

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

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

【问题讨论】：

没错，有什么问题？它应该工作。看看这个网站：carl-topham.com/theblog/post/…
当我加载插件并点击它时，它只显示一个小弹出框，右下角有一个灰色的小框。
我尝试了那个链接，但我仍然无法让它工作。我更新了 manifest_version 2 ，在文件夹中获得了 jQuery 1.10.2 min ，当我点击插件时什么也没发生。我还将 background_page 更新为 "background": {"page": "background.html"}
你把事情搞混了一点。你想达到什么目的？使'google.com*' 上的每个a 元素的背景自动变黄？或者有一个按钮，当点击该按钮时，活动标签页的每个 a 元素的背景变为黄色？
@user2200175 敲门，敲门！您在下面尝试过我提出的解决方案吗？你得到这个工作了吗？

标签： javascript jquery html google-chrome google-chrome-extension

【解决方案1】：

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

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

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

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

让您的背景页面（或者更好的是 event-page）监听 chrome.browserAction.onClicked 事件。
（注意，为了触发事件，不需要设置默认弹出窗口。）
发生这种情况时，请使用 programmatic injection 将 jquery.min.js 和 content.js 注入活动标签页，使用 chrome.tabs.executeScript。 p>
为了使上述步骤成为可能，您还必须声明必要的permissions，即"tabs"和URL match-patterns您的扩展程序应该可以访问的页面（例如，"http://*/*" 和 "https://*/*" 可以使用 http 和 https 方案访问所有页面）。

我还建议仔细查看 manifest specification 以熟悉可用字段和可能的值。

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

扩展文件夹结构：

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

manifest.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://*/*"
    ]
}

background.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"
    });
});

content.js：

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

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

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

使用页面操作而不是浏览器操作。
将您的内容脚本注入每个页面，并通过从背景页面到内容脚本的消息传递来触发突出显示。

【讨论】：