On the Windows 10 OS, the color of highlight on text on the browser is blue (I think it's the default). I wanted to change this color ... for me the combination of the blue for the background and the white for the characters didn't seem the best.

Occasional highlighting is very useful in reading English text on browser with respect to controlling the focus of concentration. I click twice the word I want to highlight. And with the shift key kept pushed, I click once another word apart, which results in expansion of highlighted areas.

I'm using Google Chrome for the browser. So I could open Chrome Developer Tools by shift + ctrl + I , click the + button which is on the right edge whose caption is "New Style Rule," and add a CSS code by typing (filling the blanks with):

::selection {
   background: dimgray;
   color: white;
}

By which I can get the background of highlighted text into some gray color I prefer for my use.

But this requires me this procedure at every page every time I wanted to make the color changed. But what if I could make an add-on for Google Chrome for this modification...?

The following is my quest this Sunday in trying to fabricate such an add-on. Let me confess: I was very (oh, rather utterly...?) new to this technique...

A conspicuous webpage from a Google retrieval result told me that for the purpose of this time, what I need to make is the folliwing two:

- a Javascript file
- a manifest file

Manifest file...? What is a manifest file...?

The file extension is ... .json. Ah, json ... I haven't actually written any json file.

It seems that I'd better mimic the sample code on the page to rehearse the making of intended files. For I'm very new to this technique.

---

After 3 hours of trials and errors, with help of dozens of webpages, I learnt:

This time, no Javascript file was needed. Instead I need a CSS file and a manifest file.

And it seems I barely made it, though the code might be inelegant.

On Notepad, I made a manifest file (its file extention is to be .json):

{
   "name": "highlight color changer",
   "version": "1.0.0",
   "description": "modify the highlighted background color",
   "manifest_version": 2,
   "content_scripts": [
      {
         "matches": [ "http://*/*", "https://*/*" ],
         "css": [ "colormodification.css" ]
      }
   ]
}

I saved it as manifest.json. I didn't check if another name is okay. Probably the item "desciption" might not be particularly necessary.

And on Notepad, I made a CSS file (its file extension is to be .css and I saved it as colormodification.css as appeared in the code above) the content of which is the same as what I first wrote down:

::selection {
   background: dimgray;
   color: white;
}

I put these two files into a folder (whose name can be whatever). And I opend the settings page of Chrome for extensions. I loaded this folder onto Chrome ... as an unpackaged extension.

It seems to function ... it's okay for now.

DISCLAIMER: Sorry, I can't be respobsible for any troubles on your browser or PC due to applying these codes. Nor do I guarantee the codes properly work. This is a diary, it's no technical document.

---

(P.S. 2020/05/31 16:14)

Of course there are webpages which have their own definition of colors for highlighted part at the lower (?) level of the DOM tree. To such pages, the CSS code above would not make the intended effect. So, I added !important to each item in the CSS, like:

background: dimgray !important;

I don't know well if also in such a case this could be not so much an undesirable measure to take in terms of the manner of writing CSS code.