Question

我是新手，并在本教程中对其进行了编辑，如果这是可笑的基础，请对不起。

是的，我知道这已经发布过了。我花了几个小时来研究如何执行此操作，而Pass a variable from content script to popup和Chrome Extension how to send data from content script to popup.html都非常接近我的需求，而对我来说却没有用。

因此，有一个站点将章节内容保存在所有章节的另一个div中的一个div中。上/下滚动时将显示上一章/下一章。

我要创建一个新按钮，以便该站点上每个章节div的popup.html上出现一个新按钮。我在使新按钮出现时遇到问题。

我目前拥有的东西：

清单

{
 "manifest_version": 2,
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",

  "permissions": ["activeTab", "declarativeContent", "tabs", "storage"],

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },

  "content_scripts": [{
    "matches": ["http://webnovel.com/*"],
    "js":      ["content.js"],
    "run_at": "document_end"
  }],

  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },

  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  }
}

background.js

chrome.runtime.onInstalled.addListener(function() {
  console.log("Extension running!");
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'www.webnovel.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

content.js

chrome.runtime.onMessage.addListener(
  function (message, sender, response) {
    console.log("Request received");
    switch(message.type) {
      case "getChapterCount":
        response(5);
        break;
      default:
        console.error("Unrecognised message: ", message);
    }
    return true;
  }
);

popup.js

let page = document.getElementById('buttonDiv');

function constructOptions(length) {
  console.log(length);
  var i;
  for (i = 0; i < length; i++) {
    let button = document.createElement('button');
    button.addEventListener('click', function() {
      //console.log('number is ' + i);
    });
    page.appendChild(button);
  }
}

update.onclick = function(){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {type: "getChapterCount"}, constructOptions)}
  )
};

popup.html

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

预期：我进入该站点，打开弹出窗口并按lone更新按钮，这将为div章节中的每个章节显示一个新按钮。或者，由于我只用5个替换了实际上从站点读取章节数的javascript，就出现了另外五个按钮。（没有）

实际：扩展程序检查器显示，当我按下更新按钮时，popup.js第4行（console.log（length））未定义。我相信实际网页上的检查器（我认为content.js应该在其中打印出一些东西）不会显示任何内容。

Chrome扩展程序，基于文档元素编辑弹出窗口

0 个答案: