基本的 Google Chrome 扩展菜鸟问题

哈里·肖塔

我正在尝试创建一个基本的 Google Chrome 扩展程序,它只是复制我所在页面上的源 HTML 代码。我从未创建过 Chrome 扩展程序,我真的被困住了,希望得到一些帮助。我使用 Chrome 指南启动了扩展程序,从我在互联网上读到的内容是我访问网页的内容脚本。但是,我不知道如何调用内容脚本。我尝试使用 import 语句,但收到错误 - 我想我真的误解了整个事情是如何工作的。我还试图让控制台日志显示在网页控制台中,而不是 chrome 扩展控制台中。

弹出窗口.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>

</body>
</html>

清单文件

 "name": "Company Websites",
    "version": "1.0",
    "description": "Build an Extension!",
    "background": {
        "scripts": ["background.js"],
        "persistent": false
      },
      "content_scripts": [
        {
          "matches": [
            "<all_urls>"
          ],
          "js": ["content.js"]
        }
      ],
      "page_action": {
        "default_popup": "popup.html"
      },
      "permissions": ["storage","declarativeContent"],
    "manifest_version": 2
  }

内容.js

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("changeColor").addEventListener("click", handler);
  });

  // The handler also must go in a .js file
  function handler() {

    console.log("hello?");
    //somehow copy source code
  }

背景.js

chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#3aa757'}, function() {
      console.log("The color is green.");
    });
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: '* insert target web address*'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });

任何帮助,将不胜感激!

杰森欧文斯

创建另一个名为 load.js 的文件并执行XML HttpRequest,然后将其包含在 popup.html 中。

弹出窗口.html

<script src="load.js"></script>

加载.js

  function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    var data = xhttp.responseText;
}}
  xhttp.open("GET", "website url", true);
  xhttp.send();
}
loadDoc()

从那里你可以在本地存储中存储和检索它,console.log(data),或者在 document.getElementById('ID').innerHTML = data 中使用它

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章