Question

我目前正在使用Google Chrome扩展程序，我将需要您的帮助。我的想法是在CSS中创建一个类似于:: selection selector的荧光笔。它的示例位于：https://www.w3schools.com/cssref/sel_selection.asp当您选择文本区域时，它将以不同的背景颜色突出显示它。但是，在鼠标单击其他区域后，突出显示的文本将恢复为原始颜色。

我想创建Chrome扩展程序，它会记住所有选定的区域，无论用户点击网站上的任何内容，这些区域都会保持突出显示。

我有几个基于Google Chrome扩展程序教程的文件。 manifest.json中。正如您所看到的，我的想法是仅在当前Tab上使用荧光笔（因此在权限中使用activeTab）

{
  "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()]
    }]);
  });
});

我真诚地希望您的善意和帮助，因为它已经变得难以实现结果。

Google Chrome浏览器的荧光笔扩展程序

0 个答案: