Chrome扩展程序:内容脚本找不到dom元素

时间:2014-08-27 15:51:09

标签: javascript dom google-chrome-extension

我正在编写chrome扩展程序并拥有以下代码

popup.html:

   <script type='text/javascript' src='content.js'></script>

content.js:

var container = document.getElementById('viewer')
container.style['white-space'] = 'nowrap'

var node_list = document.getElementsByClassName('page')
Array.prototype.forEach.call(node_list, function(page) {
  page.style['display'] = 'inline-block'
})

的manifest.json:

{
    "name": "horizontal_pdf",
    "version": "0.0.1",
    "manifest_version": 2,
    "browser_action": {
        "default_title": "My Title",
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icons/16x16.jpg",
            "32": "icons/32x32.jpg"
        }
    }
}

但是当我点击图标并查看控制台时,我看到错误消息:

Uncaught TypeError: Cannot read property 'style' of null 

在content.js的第2行。因此,它无法找到ID为viewer的div。但当我看到页面的dom时,它就在那里。我做错了什么?

PS:我没有在清单中指定内容脚本,因为我不希望它自动触发,但只有当用户点击图标时才会触发。

2 个答案:

答案 0 :(得分:0)

根据Google的文档,您可以使用程序化注射。

在后台脚本中,您可以添加:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: "content.js"});
});

也许在您弹出的脚本中,您可以致电:

chrome.tabs.executeScript(null, {file: "content.js"});

(您需要以任何方式添加activeTab权限)

https://developer.chrome.com/extensions/content_scripts#pi

答案 1 :(得分:-1)

如果你想在popup.html / js中获取dom,你必须为内容脚本添加content.js,然后向popup.js发送消息,你可以从popup.js调用content.js来获取信息。背景脚本无法访问dom ......这就是我所做的......