如何使用jQuery在Chrome扩展程序中的打开选项卡上运行自定义功能

Question

我有一个chrome扩展,应该操作当前打开的页面(选项卡)的内容.

要获取用户输入,我使用带有一些输入字段的popup.html.来自该字段的输入被发送到执行期望变换的页面(内容脚本).

问题是我无法运行我在内容脚本中定义的函数.我试图在content_script.js中定义函数,并尝试将其插入到页面中

var new_script2 = document.createElement('script');
code = "function definition goes here";
new_script2.text = code;
document.getElementsByTagName('head')[0].appendChild(new_script2);

什么都行不通 另外,我也无法在content_script.js中看到jQuery对象,即使我按照此处的建议将它们插入清单中也是如此

在弹出窗口中生成事件后,如何在Chrome扩展程序中的打开选项卡上运行自定义功能的任何想法???

[UPDATE]

下面是我现在所拥有的,我解决了我的问题,关键是要小心消息传递和函数初始化.

我的清单如下所示

{
  "background_page": "background.html",
  "name": "some",
  "version": "0.1",
  "description": "some",
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "some",
    "popup": "popup.html"
  },
   "content_scripts": [ {
      "js": [ "javascripts/jquery-1.5.min.js", "javascripts/jquerylatest.js", "javascripts/content_script.js" ],
      "matches": [ "http://*/*", "https://*/*", "file://*/*" ],
      "run_at": "document_end"
   } ],
   "permissions": [ "tabs", "http://*/", "https://*/" ]
}

在popup.html中,我创建了一个按钮,并指定了一个将消息发送到backgroundpage.html的事件处理程序

    $( "#create-user" )
        .button()
        .click(function() {
            //~ alert(allFields.val());
            //~ var annot = [attrValue, attrType];
            chrome.tabs.getSelected(null, function(tab) {               
            chrome.tabs.sendRequest(tab.id, {"attrValue" : attrValue.val(), "attrType" : attrType.val()}, 
            function readResponse() { console.log("got response in popup");} );
            window.close();
            });
        });

在后台页面中,我通过弹出窗口发送消息

var tab_id = -1;

chrome.tabs.getSelected(null, function(tab) {
        tab_id = tab.id;
    });

chrome.extension.onRequest.addListener(function(request, sender) {
    console.log("in bg.js addlistener method " + request);
        chrome.tabs.executeScript(tab_id, {file:"javascripts/content_script.js"});
    });

并将它们进一步重定向到内容脚本以用于页面修改.content_script监听如下:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
//do your manipulation here
});

最后,不要忘记将jquery库包含到扩展的javascripts /子文件夹中.

Answer 1

据我了解，注入的 Javascript 函数不会被保存，除非它们附加到一个事件（如 akeypress或 an onclick）。（如果我错了，请有人纠正我！）

相反，我建议使用chrome.tabs.executeScript(tabId, details)并编写 中的代码details.code，或者通过您可以注入的方式将代码放在另一个内容脚本 .js 文件中details.file。

但同样，一旦脚本完成，注入的函数将被删除。
因此，将您的函数和其他代码放入内容脚本中，注入它，您的内容脚本可以使用其函数，直到脚本完成。