Question

我在 Google Chrome扩展程序中遇到了一个奇怪的问题，我可以在主页内编辑DIV。我还可以编辑位于主页面内的iFrame内的DIV（iFrame中的不同URL），但是我无法同时编辑这两个DIV。我无法解释这一点，并想知道这可能是一个错误或我做错了什么。

这是我的清单文件（manifest.json）

{
    "manifest_version": 2,
    "version": "1.0",
    "name": "Test",
    "description": "Replace",

    "content_scripts": [
        {
            "all_frames": true,
            "matches": ["http://*/*","https://*/*","<all_urls>"],
            "exclude_matches": [],
              "js": ["replace.js"]
        }
    ]
}

这是我的javascript（replace.js）

// Elements on the main page
document.getElementById('productSelectorTab').innerHTML = '<div class="icon"></div><div class="text">Hello World</div>';
document.getElementById('downloadCenterTab').innerHTML = '<div class="icon"></div><div class="text">Hello World</div>';

// Elements within an iFrame
document.getElementById('product0').innerHTML = 'XB4BV31 Hello World';
document.getElementById('product1').innerHTML = 'XB4BV33 Hello World';

以下是我用来测试此扩展程序的页面。

http://www.schneider-electric.com/products/au/en/4800-pushbuttons-switches-pilot-lights-control-stations-joysticks/4840-pushbuttons-switches-pilot-lights/632-harmony-xb4/?BUSINESS=1

当您安装了扩展程序后，您会注意到左侧导航栏中的两个TAB现在说“Hello World＆＃39;”。但其他两个要素没有改变。因此，请注释js文件中的前两行代码（productSelectorTab＆amp; downloadCenterTab），重新加载扩展，重新加载页面，现在位于iFrame内的其他两个元素现在显示Hello World。

我不明白为什么我无法同时编辑主页面和iFrame中的其他单独页面。希望有人可以解释这个问题以及我做错了什么。谢谢大家，感谢您的帮助！

Answer 1

如果没有指向您的扩展程序的链接，我无法安装您的扩展程序： - ）

如果帖子中的代码行代表replace.js的完整代码，我有以下暂停：

也许您应该等待页面完成加载，方法是使用window.onload（或类似）或在清单中使用"run_at": "document_end"
当productX元素或XXXXXTab元素不存在时，脚本可能会产生错误。我猜他们不会在主页面和iframe页面上都存在，是吗？在这种情况下：检查控制台是否有错误。

Answer 2

感谢Devnull69，你的第2点就是现货！这导致了错误。清单文件不需要更改，我们所做的只是在更改ID之前检查ID。

这是上面提到的修复的javascript（replace.js）。

// Elements on the main page
if(document.getElementById('productSelectorTab')){
   document.getElementById('productSelectorTab').innerHTML = '<div class="icon"></div><div class="text">Hello World</div>';
};
if(document.getElementById('downloadCenterTab')){
   document.getElementById('downloadCenterTab').innerHTML = '<div class="icon"></div><div class="text">Hello World</div>';
};

// Elements within an iFrame
if(document.getElementById('product0')){
   document.getElementById('product0').innerHTML = 'XB4BV31 Hello World';
};
if(document.getElementById('product1')){
   document.getElementById('product1').innerHTML = 'XB4BV33 Hello World';
};

Chrome扩展程序无法在主页面上同时编辑DIV，同时在iFrame页面内编辑DIV

2 个答案: