Я надеялся не просить вас о помощи, но вот я
Я хочу создать простое расширение Chrome, которое будет отмечать все платные статьи на главной странице.
JS вmedium-extension.js работает через консоль браузера, когда запускается кнопкой, которую можно найти в файле HTML.
Проблема в том, что я запутался, мне нужен фоновый скрипт, потому что, когда я пытаюсь безодно расширение не работает.Сейчас я пытаюсь без скрипта контента, и он все еще не работает.
Я пытаюсь сделать это с одним из них, потому что я не знаю, как создать связь между фоновыми и контентными скриптами.
Вот код:
manifest.js
{
"name": "Medium cleared",
"version": "1",
"description": "Lets's make Medium great again",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html"
},
"background": {
"scripts": ["medium-extension.js"],
"persistent": false
}
}
medium-extension.js
function clearMedium() {
Array.from(
document.querySelectorAll('article')
).forEach(el => {
let shouldHide = el.querySelectorAll('span.u-paddingLeft4').length;
if (shouldHide) {
el.style.background = "#FCBFB7";
}
});
Array.from(
document.querySelectorAll('li')
).forEach(el => {
let shouldHide = el.querySelectorAll('span.u-paddingLeft4').length;
if (shouldHide) {
el.style.background = "#FCBFB7";
}
});
Array.from(
document.querySelectorAll('.extremeHero-smallCard.extremeHero-smallCard1.js-trackedPost, .extremeHero-largeCard.js-trackedPost.uiScale.uiScale-ui--small.uiScale-caption--small, .extremeHero-smallCard.extremeHero-smallCard3.js-trackedPost, .extremeHero-smallCard.extremeHero-smallCard2.js-trackedPost, .extremeHero-mediumCard.js-trackedPost')
).forEach(el => {
let shouldHide = el.querySelectorAll('span.u-paddingLeft4').length;
if (shouldHide) {
el.style.background = "#FCBFB7";
}
});
Array.from(
document.querySelectorAll('section.m.n.o.ff.q.d')
).forEach(el => {
let shouldHide = el.querySelectorAll('svg.dl.dm').length;
if (shouldHide) {
el.style.background = "#FCBFB7";
}
});
setTimeout(clearMedium, 5000);
}
<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="medium-extension.js"></script>
<style>
.button-activate button {
background: #FF82A9;
color: white;
width: 300px;
height:50px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="popup">
<h3>If you are tired of clicking on premium articles and lose one of your precios 3 free slots every month, just click "Clear your Medium" and all premium articles will be colored in red.</h3>
<div class="button-activate">
<button onclick="clearMedium()">Clear your Medium</button>
</div>
</div>
</body>
</html>