在带有 manifest_version 3 的 chrome 扩展上使用 document.execCommand()

Question

我正在开发一个 Chrome 扩展程序，它以与 CTRL+F 相同的方式突出显示文本，我发现这段代码可以突出显示文本。

然而，在尝试实现它时，我遇到了一些麻烦，除了document.execCommand("HiliteColor")和document.execCommand("BackColor")函数之外，一切都完美运行。

我从这篇文章中读到 execCommand 在 content_script 中不起作用，因此必须将其发送到后台页面。

但是，后台页面已被service_workers取代，在尝试使用它时，它无法识别 window 变量。

有没有办法在不降级到 manifest_version 2 和重构大部分代码的情况下实现以下功能。

代码

清单.json：

{
    "manifest_version": 3,
    "name": "ext",
    "version": "1.0",
    "description": "Extension",
    "icons": {
        "48": "icon.png"
    },
    "permissions": [
        "tabs",
        "storage",
        "activeTab"
    ],
    "host_permissions": [
        "https://api.com/*"
    ],
    "action": {
        "default_popup": "popup.html",
        "default_icon": "icon.png"
    },
    "content_scripts": [
        {
          "matches": [
            "<all_urls>"
          ],
          "js": [
            "scripts/Highlight.js"
          ]
        }
    ]
}

脚本/Highlight.js

function highlightSelection(color) {
  var sel = window.getSelection();
  var range = sel.getRangeAt(0);
  document.designMode = "on";
  if (range) {
      sel.removeAllRanges();
      sel.addRange(range);
  }
  console.log("Design mode on");
  if (!document.execCommand("HiliteColor", false, color)) {
    document.execCommand("BackColor", false, color);
  }
  console.log("Design mode off");
  document.designMode = "off";
}

chrome.runtime.onMessage.addListener((request) => {
  console.log(request);
  for (let index = 0; index < request.textArray.length; index++) {
    const element = request.textArray[index];
    console.log(element)
    window.find(element.text);
    highlightSelection(element.color);
  }
});

Listener 收到一条消息，代码如下：

function sendHighlight(color, errors) {
  chrome.tabs.query({ active: true, currentWindow: true}, function(activeTabs) {
    chrome.tabs.sendMessage(activeTabs[0].id, { errors, color }, (response) => {
      console.log(response);
    });
  });
}

document.getElementById("button").addEventListener("click", () => sendHighlight("blue", ["Hello", "apple", "arraycontent"]));

我试过的

到目前为止，我试图对 window.find() 进行评论，并只是突出显示 window 上的选定文本，但是代码似乎完全忽略了 execCommand 或者至少没有按预期工作。

我还尝试这样修改清单：

    "background": {
        "service_worker": "scripts/Highlight.js"
    }

但它似乎无法识别全局变量，例如 window 和文档。

Answer 1

我首先要感谢@wOxxOm 帮助我找到答案。

正如他们所解释的，我们首先需要在使用任何 HiliteColor 之前添加以下调用 function document.execCommand("styleWithCSS", false, true);

接下来，我犯的最大错误是在参数处理中，其中颜色参数在 HighlightSelection function 中未定义。

这是 Highlight.js function 的最终版本，其中根据调用突出显示所有给定的 arguments。

function highlightSelection(color) {
  document.designMode = "on";
  document.execCommand("styleWithCSS", false, true);
  if (!document.execCommand("HiliteColor", false, color)) {
    document.execCommand("BackColor", false, color);
  }
  document.designMode = "off";
}

chrome.runtime.onMessage.addListener((request) => {
  for (let index = 0; index < request.search.length; index++) {
    const element = request.search[index];
    while(window.find(element)) {
      highlightSelection(request.color);
    }
  }
});

我为犯这样的菜鸟错误感到非常羞愧，希望我的代码能够帮助你们中的一些人。