0

I am currently working on Google Chrome extension for which I will need your help. My idea is create a highlighter similar to ::selection selector in CSS. Example of it lies here: https://www.w3schools.com/cssref/sel_selection.asp When you select an area of text, it will highlight it in a different background-color. However, after you mouseclick other area, highlighted text will return to its original color.

I want to create Chrome extension which will remember all of its selected areas and those will stay highlighted no matter how much user clicks anything on a website.

I have several files based on Google Chrome extension tutorial. manifest.json. As you can see, my idea is to use highlighter only on a current Tab (thus activeTab in permissions)

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

Then I have made options.js from where user can select in which color will be the selected area highlighted.

'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);

Additionally, I have other required files such as popup.js

'use strict';

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

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

And background.js file: 

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

I sincerely hope for your kindness and help as it has become difficult to achieve the result.

rrrrrauno
  • 41
  • 1
  • 8
  • You did a good job of describing what you've done so far, but you didn't ask a question. – Jordan Running May 23 '18 at 18:27
  • You have a content script in manifest.json for http sites (not https), which is not really needed if you use declarativeContent. What's really needed in this scenario is adding the host pattern to "permissions" value in manifest.json. See the documentation for declarativeContent and the [demo extensions](https://developer.chrome.com/extensions/samples). It seems you don't know the event/background page is a *separate hidden page* (totally not related to web pages) which has its [own devtools](https://stackoverflow.com/a/10258029). – wOxxOm May 23 '18 at 18:29
  • My question is how should I edit those files (particularly in the area of Javascript) in order to selected area being constantly highlighted and not forgotten by another mouse click. Maybe it could be something like this in popups.js file such as let changeColor = document.getSelection('changeColor'); ? – rrrrrauno May 23 '18 at 19:14
  • Have a look at https://stackoverflow.com/questions/20534685/chrome-extension-highlighted-text-selection-chrome-tabs – Pavindu Mar 13 '19 at 14:40

0 Answers0