Question

所以我正在研究基本示例，这是我对chrome扩展的要求：扩展应该能够从网页读取数据并在点击图标时显示在弹出窗口中。

我有这些文件 - manifest.json，popup.html，background.js，content.js，webPage.html（这是存储在我本地计算机上的html文件，数据是从这个页面阅读）

manifest.json

{
          "name": "Test",
          "version": "1.0",
          "description": "Testing",
          "permissions": ["file:///A:/Study/TestExt/webp.html"],
           "content_scripts": [
            {
              "matches": ["file:///A:/Study/TestExt/webp.html"],
              "js": ["content.js"]
            }
          ],
          "background": {
            "persistent": true,
            "scripts": ["background.js"]
          },
          "browser_action": {
              "default_title": "Test",
              "default_icon": "icon.png",
              "default_popup": "popup.html"

          },
          "manifest_version": 2
        }

popup.html

<html>

            <head>
             <script src= "background.js"></script>  
            </head>

            <body>

              <p id="writeWord"></p>

            </body>

            </html>

webp.html

<html>

            <body>
            <div >

            <p id="readWord">WordToBeRead</p>

            </div>

            </body>

        </html>

content.js

var innerText = document.getElementById("readWord").innerHTML;

            var k = new Object();
            k.textWord = innerText;

            chrome.runtime.sendMessage(k, function(response) {
                console.log("hello");
            });

background.js

chrome.runtime.onMessage.addListener(
          function(request, sender, sendResponse) {
            console.log(sender.tab ?
                        "from a content script:" + sender.tab.url :
                        "from the extension");
            if (request.textWord == "WordToBeRead")

            document.getElementById("writeWord").innerHTML = request.textWord;
          });

理想情况下，当我点击扩展图标时，我应该弹出单词“WordToBeRead”，但我只得到空弹出窗口。我无法弄清楚到底哪里出错了。

Chrome扩展开发：如何从网页读取数据并在popup.html上显示？

0 个答案: