Javascript Google Chrome的Highlighter扩展

我目前正在谷歌浏览器的扩展工作，我需要你的帮助。我的想法是在CSS中创建一个类似：：selection selector的highlighter。示例如下：当您选择一个文本区域时，它将以不同的背景色突出显示该区域。但是，在鼠标单击其他区域后，高亮显示的文本将返回其原始颜色

我想创建一个Chrome扩展，它将记住所有选中的区域，无论用户在网站上点击多少次，这些区域都将保持高亮显示

我有几个基于谷歌浏览器扩展教程的文件。 manifest.json。如您所见，我的想法是仅在当前选项卡上使用highlighter（因此在权限中使用activeTab）

然后我制作了options.js，用户可以从中选择高亮显示选定区域的颜色

'use strict';

let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];

function constructOptions(kButtonColors) {
  for (let item of kButtonColors) {
    let button = document.createElement('button');
    button.style.backgroundColor = item;
    button.addEventListener('click', function() {
      chrome.storage.sync.set({color: item}, function() {
        console.log('color is ' + item);
      })
    });
    document.get('buttonDiv').appendChild(button);

    //document.querySelector().appendChild(button);
  }
}
constructOptions(kButtonColors);

此外，我还有其他必需的文件，如popup.js

'use strict';

let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
  changeColor.setAttribute('value', data.color);
});

和background.js文件：

'use strict';

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

---

我真诚地希望你的好意和帮助，因为这已经变得很难实现的结果

您在描述到目前为止所做的工作方面做得很好，但您没有提出任何问题。您在manifest.json中有一个用于http站点（而不是https）的内容脚本，如果您使用declarativeContent，则实际上不需要该脚本。在这个场景中真正需要的是将主机模式添加到manifest.json中的“permissions”值中。有关declarativeContent和的信息，请参阅文档。您似乎不知道事件/背景页面是一个单独的隐藏页面（与网页完全无关），它有自己的功能。我的问题是，我应该如何编辑这些文件（特别是在Javascript区域），以便不断突出显示选定区域，而不被另一次鼠标单击遗忘。在popups.js文件中可能是这样的，比如让changeColor=document.getSelection（'changeColor'）？看看

'use strict';

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});