0

我正在尝试为 Chrome 制作一个新的扩展，它将解析当前选项卡的 HTML 代码并对其进行处理。

这就是我到目前为止所得到的。

清单.json

{
    "name": "some name",
    "manifest_version": 2,
    "version": "0.2",
    "description": "does something",
    "browser_action": {
        "default_icon": "logo.png",
        "default_popup": "popup.html"
    },
    "icons": {
      "128": "icon_128x128.png",
      "16": "icon_16x16.png",
      "48": "icon_48x48.png"
   },
    "background": {    
    "scripts": ["info.js", "mainme.js"]
  },
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ]}

信息.js

  function init() {
  var button = document.getElementById("clickhere");
  if(button.addEventListener){
     button.addEventListener("click", function() { 

    //function here
        chrome.tabs.executeScript(null,{file: "mainme.js"});


    //function end  

  }, false);
  } else if(button.attachEvent){
    button.attachEvent("onclick", function() { alert("alert");});
    }
  };
  if(window.addEventListener){
    window.addEventListener("load", init, false);
    } else if(window.attachEvent){
        window.attachEvent("onload", init);
    } else{
        document.addEventListener("load", init, false);
    }

mainme.js

  var maintest = document.getElementsByTagName('html')[0].innerHTML;
  var mtest = maintest.search("<body");
  document.getElementById("divy").innerHTML=mtest;

popup.html

<HTML>

<head>
<script type="text/javascript" src="info.js"></script>

</head>

<body>

<div id="divy" width="200" height="400">blank</div>
<button id="clickhere">Press</button>


</body>
</html>

这个想法是，当我单击 popup.html 上的按钮时， div id="divy" 应该更改为 mtest 变量。我认为一切正常，但问题是当我单击按钮 id="clickhere" 时，控制台日志上出现“未捕获的类型错误：无法设置属性 'innerHTML' of null”错误。

到目前为止，主要是扩展添加了侦听器“onclick”并触发指向 mainme.js 的函数 chrome.tabs.executeScript，然后在 mainme.js 中获取当前选项卡的页面源，将其分配给 maintest 然后搜索

ChrisP 回答后更新：

首先，我要感谢您的提示。

我更改了我的清单以包含这个

  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["mainme.js"]
    }
  ],

那我有一些关于mainme.js的问题，我应该怎么把代码放进去？我在想像下面这样的东西

chrome.runtime.sendMessage({code:var maintest = document.getElementsByTagName('html')[0].innerHTML;var mtest = maintest.search("<body");}, function(response) {

window.document.getElementById("divy").innerHTML=mtest;

});

不知道我应该如何实现我的代码:(

4

2 回答 2

1

由于 Chrome 扩展程序只能在 Chrome 中运行，因此您可以保证该方法addEventListener已定义，并且未定义attachEvent。所以不需要那个测试。

据我了解，您正在尝试从当前打开的选项卡中提取内容，并将其显示在弹出窗口中。在不为您编写整个代码的情况下，以下是我的建议：

背景页面是扩展的基石。基本上，您的扩展程序应如下所示：

web page <=> background page <=> popup page

于 2013-09-25T10:01:40.150 回答
0

尝试更换

document.getElementById("divy").innerHTML=mtest;

和

window.document.getElementById("divy").innerHTML=mtest;
于 2013-09-25T09:19:08.253 回答