Google chrome extension 在chrome扩展中运行上下文菜单触发的jquery脚本

我是chrome扩展开发的新手。我的示例代码运行不正常。 要求：点击上下文菜单按钮执行任何jquery脚本（比如$（“body”）.hide（）；）

从代码来看，只有jquery部分不起作用

我有以下文件：

manifest.json

 {
"manifest_version": 2,
"name": "jQuery DOM",
"version": "1",
"permissions": [
 "contextMenus","tabs","activeTab"
],
"background": {
 "scripts": ["jquery.min.js","sample.js"]
 },
 "description": "Manipulate the DOM when the page is done loading",
 "browser_action": {
 "name": "Manipulate DOM",
 "icons": ["icon.png"],
 "default_icon": "icon.png"
 },
 "content_scripts": [ {
  "js": [ "jquery.min.js", "background.js" ],
  "matches": [ "http://*/*", "https://*/*"],
    "run_at": "document_end"
 }]
 }

background.js

 $("body").append('Test');

我在文件夹中有icon.png，它加载得很好。 jquery.min.js位于同一文件夹中

sample.js

            alert("Extension loaded");
            function genericOnClick(info, tab) {
            alert("Tab "+tab.id);
            chrome.tabs.executeScript(tab.id, {
                    file: "jquery.min.js",
                    allFrames: true
                },function(){
                alert("callback");
                  $("body").hide();
                });
            alert("Completed");
            $("body").hide();
            }
            var contexts = ["page"];

            for (var i = 0; i < contexts.length; i++) {
              var context = contexts[i];
              var title = "Test Page menu item";
              var id = chrome.contextMenus.create({"title": title, "contexts":[context],
                                                   "onclick": genericOnClick});
              console.log("'" + context + "' item:" + id);
            }

警报（“已加载扩展”）；
函数常规单击（信息，选项卡）{
警报（“选项卡”+选项卡id）；
chrome.tabs.executeScript（tab.id{
文件：“jquery.min.js”，
所有帧：正确
}，函数（）{
警报（“回调”）；
$（“body”）.hide（）；
});
警报（“已完成”）；
$（“body”）.hide（）；
}
变量上下文=[“页面”]；
for（var i=0；i

background.js有效！ 所有警报都可以在文件中工作，但genericOnClick的.hide函数不起作用。 即使我将代码从sample.js移到background.js，它也不会工作。

---

你能告诉我哪里出错了吗？

正如我提到的，背景脚本不允许与DOM交互（而内容脚本不允许使用

chrome.contextMenus

）。您需要将两者结合起来，并使用消息传递告诉内容脚本何时执行。我还做了一些其他调整：

• 我重命名了

  background.js

  和

  content.js

  ，这样他们的名字现在 反映他们所做的，并将

  background.js

  放入事件页面
• 我删除了浏览器操作（浏览器） 扩展需要

  browserAction.html

  或

  background.js

  才能使用 需要

  chrome.browserAction.onClicked.addListener

  来执行任何操作 而不是显示图标）
• 以编程方式注入jquery意味着总是将其作为 内容脚本是不必要的（尽管跳过编程注入允许您忽略最后三个权限）

• background.js

  不需要jquery 再也没有了，所以也没有在那里加载
• 默认的

  executeScript

  tab是活动选项卡，因此我们不需要它的id

这是成品：

manifest.json

{
  "manifest_version": 2,
  "name": "jQuery DOM",
  "version": "1",
  "permissions": [
    "contextMenus", "activeTab", "tabs", "http://*/", "https://*/"
  ],
  "background": {
    "scripts": [ "background.js" ],
    "persistent": false
  },
  "content_scripts": [ {
    "js": [ "content.js" ],
    "matches": [ "<all_urls>" ]
  }],
  "description": "Manipulate the DOM when the page is done loading"
}

content.js

function genericOnClick(info, tab) {
    chrome.tabs.executeScript(null,
                              {"file": "jquery.min.js"},
                              function() {
                                  chrome.tabs.sendMessage(tab.id,{"message":"hide"});
                              });
}


chrome.contextMenus.create({"title": "Test Page menu item",
                            "contexts":["page"],
                            "id":"contextId"});

chrome.contextMenus.onClicked.addListener(genericOnClick);

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.message == 'hide') {
        $("body").hide();
    }
    sendResponse();
});

---

您的

content.js

可能比这里要大得多（+1表示默认值）。但是如果它很小，另一个选择是完全省略内容脚本，并用

chrome.tabs.executeScript（null，{code:$（'body'）.hide（）；“}）替换
sendmages
看起来您正在将内容脚本（在每个页面的上下文中运行）与背景脚本（在每个页面的chrome上下文中运行）与浏览器操作（单击操作图标时运行）相结合。你想做什么，什么时候做？我希望$（“body”）.hide（）在我单击上下文菜单项时可以工作。在我看来，一切都正常，只是背景脚本（
sample.js
）不允许与DOM交互。我认为您需要向内容脚本发送消息（
background.js
——应该重命名），并使其隐藏正文。您不需要浏览器操作。这能解决问题吗？@Teepeemm我试着用action来准备上下文菜单，但这些带有action的菜单在background.js中不起作用。请原谅我的文件命名，它会造成混乱。关于浏览器操作，它（至少对我来说）可以测试附加组件是否工作。但是没有写任何操作。或者如果
content.js
是巨大的，则以编程方式注入它以及
jquery
，并且仍然忽略
manifest.json
中的
content\u scripts
对象。非常感谢您的回答，它成功了。我继续要求在大约：空白页上运行相同的脚本，但失败了。你能就解决我的问题提出你的建议吗。请参阅以了解更多详细信息