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

how to run custom function on an open tab within Chrome Extension using jQuery

本文关键字：选项 运行 功能 自定义 jQuery 扩展 Chrome      更新时间：2023-09-26

我有一个chrome扩展，应该操纵当前打开的页面(标签)的内容。

为了接受用户输入，我使用带有几个输入字段的pop .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);

没有效果。另外，我也不能看到jQuery对象在content_script.js即使我插入到清单建议这里

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

(更新)

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

我的清单如下

{
  "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/子文件夹中。

据我所知，注入的Javascript函数不会被保存，除非它们附加到事件(如keypress或onclick)。(如果我说错了，请指正我!)

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

但是，一旦脚本完成，注入的函数将被删除。
所以把你的函数和其他代码放到一个内容脚本中，注入它，你的内容脚本就可以使用它的函数，直到脚本完成。

相关文章：