Answer the question
In order to leave comments, you need to log in
An extension that changes the color of visited links -?
Good afternoon.
The problem is the following.
There is a certain site where the styles are adjusted so that the color of visited and unvisited links is almost the same.
To make it immediately clear which links on this site I have already visited, I decided to sketch a browser extension (Chromium) that makes the colors more different.
Initially, I wanted to make a loop that runs through all the "a" tags and changes their style. But, as it turned out, it is impossible to change the style of visited links through JS.
Then I decided to save the CSS file to my computer, change it, and use the extension script to change the address so that it points to a local file. But this option did not work either, because. Web pages opened from the Internet cannot access local files. Given that if you save a web page from this site to your computer and open it in a browser, then the same extension will work with it as it should.
Q: What other ways are there to solve this problem?
Answer the question
In order to leave comments, you need to log in
A couple of lines on js, add to inject.js
function putCSSRules(CSSRules){
const head = document.querySelector('head');
const style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(CSSRules));
head.appendChild(style);
}
putCSSRules(`a:visited{color: #f00;}`);
Usually they put a plugin like this , it specifies custom css for a:visited, and that's it.
For such things, it makes no sense to write a whole extension, there are user scripts: you put tempermonkey and immediately write the code.
Specifically, the task is usually solved by adding an inline style (it doesn’t matter in the userscript or in the extension), something like Alexander showed .
I have such a function in the global userscript for this):
tm_css(css, important) {
if(important) {
css = css.replace(/(?=[^\n\S]*;[^\n\S]*\n|[^\n\S]*\n[^\n\S]*\})/g, ' !important');
}
(document.body||document.head||document.documentElement)
.insertAdjacentHTML('beforeend', `<style is="tm_css">${css}</style>`);
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question