javascript - 在 chrome.tabs.executeScript 中的 javascript 函数中传递参数

Question

我正在构建一个 chrome 扩展程序。 在这部分代码中，我尝试在加载页面中查找段落，对于 div 中具有 id load 和 detail 的每个段落，我搜索 findCheckedFact 的值是否在该段落内，如果是，我将剪切我想放置该文本在带有红色类的范围内。

findCheckedFact 是一个字符串。这里在+'console.log("Print:", str_p, "Fact:", findCheckedFact);'中定义了段落内的文本，但是没有定义参数findCheckedFact，所以无法传递？ 我尝试调用此函数 findTextInsideParagraphs("test");。

function findTextInsideParagraphs(findCheckedFact){
        chrome.tabs.executeScript({file: "js/jquery-1.12.0.min.js"}, function() {
            chrome.tabs.executeScript({"code":
                '(function(findCheckedFact){'
                    +'$("#lead, #detail").find("p").each(function() {'
                            +'var str_p = $(this).text();'
                            +'console.log("Print:", str_p, " Fact:", findCheckedFact);'
                            +'if (str_p.indexOf( findCheckedFact) >= 0) {'
                                +'console.log("Yes kest");'
                                +'$(this).html($(this).html().replace(findCheckedFact, "<span class=\'red\'> $& </span>"));'
                            +'}'
                    +'});'
                 +'}(' + JSON.stringify("Fact: " , findCheckedFact) + '));'
             });
        });

}

这个函数我试过调用 findTextInsideParagraphs("test"); 在 manifest.json 中，我确实添加了所有可能的内容以使其工作:

  "content_scripts": [
    {
      "matches": [
        "<all_urls>",
        "http://*/*",
        "https://*/*"
      ],
      "css": [
        "custom-css.css"
      ],
       "js": [
        "js/jquery-1.12.0.min.js"
      ],
      "run_at": "document_start"
    }],
  "background": {
    "persistent": false,
    "scripts": [
      "js/jquery-1.12.0.min.js",
      "background.js",
      "popup.js",
      "blic-fact-checker.js"
    ],
    "css":["custom-css.css"]
  },
  "permissions": [
    "background",
    "notifications",
    "contextMenus",
    "storage",
    "tabs",
    "activeTab",
    "http://localhost:5000/*",
    "chrome-extension://genmdmadineagnhncmefadakpchajbkj/blic-fact-checker.js",
    "chrome-devtools://devtools/bundled/inspector.html?&remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@202161/&dockSide=undocked",
    "http://*/*",
    "https://*/*",
    "<all_urls>"
  ],

谁能帮我解决这个问题，我真的找不到发生了什么事？

Answer 1

首先，阅读this explanation of different kinds of javascript code in Chrome extensions

如您所见，您在executeScript 中的代码是一个内容脚本，它无法直接访问后台代码和其他适当的扩展页面。您有 3 个主要选项:

1) 使用sendMessage 或port.postMessage 将您的FindCheckedFact 发送到内容脚本。当然，在你的内容脚本中，你必须为它们建立监听器，并将实际代码放在这些监听器中。

2) 将您的变量保存在本地或同步存储中，将您的executeScript 放入回调中，然后从您的内容脚本中读取它们。如果您有时需要重新阅读它，请在内容脚本中设置存储更改的监听器。

这些解决方案既适用于 .js 文件中的内容脚本，也适用于内联内容脚本。但是，由于您选择了内联，并且您只需以一种方式发送一个值，您就可以

3) 只需将您的 FindCheckedFact 字符串化(使用 JSON.stringify 或 toString)，然后使用 +: 插入其值

chrome.tabs.executeScript({"code":
            '(function('+strFindCheckedFact+'){'

等