Question

我希望不要向您寻求帮助，但是我在这里

我想构建一个简单的Chrome扩展程序，以在主页上标记所有付费文章。

medium-extension.js中的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>

基本Chrome扩展程序的内容和后台脚本之间的连接

0 个答案: