Расширение выделения для Google Chrome

Question

В настоящее время я работаю над расширением Google Chrome, для которого мне понадобится ваша помощь.Моя идея - создать подсветку, подобную селектору :: selection в CSS.Пример этого лежит здесь: https://www.w3schools.com/cssref/sel_selection.asp При выделении области текста она будет выделена другим цветом фона.Однако после того, как вы щелкнете мышью по другой области, выделенный текст вернется к своему первоначальному цвету.

Я хочу создать расширение Chrome, которое будет запоминать все выбранные области, и они будут выделены независимо от того, сколько пользователь нажимает на что-либо.сайт.

У меня есть несколько файлов на основе учебника по расширению Google Chrome.manifest.json.Как вы можете видеть, моя идея состоит в том, чтобы использовать подсветку только на текущей вкладке (таким образом, активная вкладка в разрешениях)

{
  "name": "Highlighter",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["activeTab", "declarativeContent", "storage"],
  "options_page": "options.html",
  "background": {
    "scripts": ["highlighter.js"],
    "persistent": false
  },
  "content_scripts": [
   {
     "matches": ["http://*/*"],
     "js": ["script.js"],
     "css": ["style.css"]
   }
 ]
}

Затем я создал файл 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()]
    }]);
  });
});

Я искреннеНадеюсь на вашу доброту и помощь, так как это стало трудно достичь результата.