Chrome 扩展程序替换当前文本区域中的单词

Question

我正在尝试制作一个 chrome 扩展，<textarea>当用户触发某个keydown事件时，它会替换当前输入的最后一个单词。所以我尝试过这个，但它并没有真正起作用。

\n\n

这是我的扩展的文件：

\n\n

我的扩展名manifest.json：

\n\n

{\n  "name": "Test",\n  "description": "test",\n  "version": "0.0.1",\n  "permissions": [\n    "activeTab"\n  ],\n  "background": {\n    "scripts": ["background.js"],\n    "persistent": false\n  },\n "browser_action": {\n    "default_title": "replace test"\n  },\n  "manifest_version": 2\n}\n

\n\n

它是background.js：

\n\n

chrome.tabs.executeScript(null, {file: "content_script.js"});\n

\n\n

及其content_script.js：

\n\n

    document.onkeydown = replacePrevWord;  \n\n// Azerty: Ctrl + \xc2\xb2 \n// Qwerty: Ctrl + \'\nfunction KeyPress(e) {\n    var evtobj = window.event? event : e\n    if (evtobj.keyCode == 222 && evtobj.ctrlKey)\n        return true;\n}\n\n\nfunction getCaretPosition(ctrl) {\n    var CaretPos = 0;   // IE Support\n    if (document.selection) {\n        ctrl.focus();\n        var Sel = document.selection.createRange();\n        Sel.moveStart(\'character\', -ctrl.value.length);\n        CaretPos = Sel.text.length;\n    }\n    // Firefox support\n    else if (ctrl.selectionStart || ctrl.selectionStart == \'0\')\n        CaretPos = ctrl.selectionStart;\n        return (CaretPos);\n}\n\n\nfunction returnWord(text, caretPos) {\n    var index = text.indexOf(caretPos);\n    var preText = text.substring(0, caretPos);\n    if (preText.indexOf(" ") > 0) {\n        var words = preText.split(" ");\n        return words[words.length - 1]; //return last word\n    }\n    else {\n        return preText;\n    }\n}\n\n\nfunction replacePrevWord() {\n    if(KeyPress()){\n        var text = document.activeElement;\n        var caretPos = getCaretPosition(text)\n        var word = returnWord(text.value, caretPos);\n        if (word != null) {\n            text.value =  text.value.replace(word,"replaced");\n        }\n    }\n}\n

\n\n

这在 JSFiddle ( http://jsfiddle.net/cyo646cr/3/ ) 上运行良好，但我不知道如何在 Chrome 扩展中执行此操作。

\n\n

有任何想法吗？

\n\n

谢谢。

\n

Answer 1

注意：自 2021 年 1 月起，使用具有和权限的Manifest V3并移至，而不是使用具有和权限的已弃用的版本。chrome.scripting.executeScript()scripting<all_urls>host_permissionschrome.tabs.executeScript()tabs

问题

您没有正确注入脚本。说起来很容易，因为调用这个简单的行

chrome.tabs.executeScript(null, {file: "content_script.js"});

在您的background.js意愿中，只会在当前选项卡中注入脚本一次（因为未指定 tabId）。因此，您的脚本只会在您打开的第一个选项卡中的每个 Google Chrome 会话中运行一次。

查看的文档chrome.tabs.executeScript。

解决办法

要解决此问题，您有两种选择：

1. "content_scripts"在您的字段中声明该字段manifest.json，以便将其注入到与模式匹配的任何页面中。
2. 使用该chrome.tabs.onUpdated.addListener方法添加侦听器并将脚本注入选项卡上。

选项1

像这样声明"content_scripts"您的字段manifest.json：

...
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["content_script.js"],
        "run_at": "document_idle",
        "all_frames": true
    }
],
...

现在，您的内容脚本将被注入到每个页面（因为"<all_urls>"将匹配所有页面）和页面的所有框架中。"content_scripts" 您可以在此处找到有关的有用信息。

选项2

请求 API 的权限chrome.tabs以及您想要的 URL manifest.json：

...
"permissions": [
    "activeTab",
    "tabs",
    "<all_urls>"
]
...

在您的 中background.js，添加一个监听器chrome.tabs.onUpdated，它将在每个选项卡更新（即 url 更新）时触发，并使用 注入您的脚本chrome.tabs.executeScript，如下所示：

chrome.tabs.onUpdated.addListener(function(tabID, info, tab) {
    chrome.tabs.executeScript(tabID, {file: "content_script.js"});
});

请参阅的文档chrome.tabs.onUpdated。