0

I was hoping not to asking you for help but here I am

I want to build a simple Chrome extension which marks all paid articles on the home page.

The JS in the medium-extension.js is working through a browser console when is triggered with a button which can be found in the HTML file.

The problem is that I am confused do I need background script, because when I try without one the extension does not work. Now I try without a content script and it still does not work.

I try to do it with one of them because I don't know how to create a connection between background and content scripts.

Here is the code:

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>
John Sanchez
  • 43
  • 4
  • You need a content script: [How to access the webpage DOM rather than the extension page DOM?](//stackoverflow.com/a/4532567) Also 1) don't use `onclick` and inline js ([more info](https://stackoverflow.com/a/25721457)), 2) manifest.json's `background` section creates a separate hidden background page which runs the specified js, which is probably not what you want, 3) the popup is a separate page with its own context and URL so having the same background script running there doesn't make much sense. 4) invoke proper devtools: [more info](https://stackoverflow.com/a/38920982). – wOxxOm Oct 23 '18 at 15:03
  • @wOxxOmcurrently in the background script which is medium-extension.js is the place where is the script that will do the magic(highlight divs). Where is the right place to put the main JS code - background or content script? – John Sanchez Oct 23 '18 at 15:45
  • See the topics I've linked. You'll probably need a popup script and a content script. – wOxxOm Oct 23 '18 at 15:53

0 Answers0