Question

我正在编写我的第一个chrome扩展程序，而我正在撰写的扩展程序是在您正在使用的网页中插入其他内容。

我有一个原型工作，我使用后台作业执行一些javascript，将内容插入页面。这是有效的，问题是我访问的一些页面上有javascript错误，我认为这导致我的javascript无法正常运行...

以下是一些代码片段，用于解释我是如何设置的：

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({ file: "js/jquery/jquery.min.js" }, function() {
    chrome.tabs.executeScript({ file: "src/inject/container_injector.js" });
  });
});

container_injector.js

var body = $('body');
var bodyContainer = $('<div id="body_container"></div>').append(body);    
$('body').html('');
$('body').append(myContentContainer).append(bodyContainer);

当你点击添加到DOM中的一些内容时，我会有一些jquery监听器，但是如果我所在的页面有javascript错误，它们有时不起作用。

有没有人知道如何让我的javascript正常运行而不受页面上现有javascript的影响？

感谢您的帮助。

编辑：

这是我的manifest.json：

{
  "name": "test.io",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "testing",
  "homepage_url": "http://test.io/",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [
      "src/bg/background.js"
    ],
    "persistent": true
  },
  "web_accessible_resources": [
    "js/jquery/jquery.min.map"
  ],
  "options_page": "src/options/index.html",
  "browser_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "test"
  },
  "permissions": [
    "activeTab",
    "clipboardRead",
    "clipboardWrite",
    "cookies",
    "https://*.test.io/",
    "http://*.test.io/"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://*/*",
        "http://*/*"
      ],
      "css": [
        "src/inject/inject.css"
      ],
      "js": [
        "js/jquery/jquery.min.js",
        "src/inject/container_injector.js"
      ]
    }
  ]
}

Answer 1

我认为错误是由于暂时删除了正文html - 这意味着主页的javascript无法找到javascript引用。

我通过不删除正文的html来解决这个问题，而是将容器放在body元素上，如下所示：

$('body').prepend(myContentContainer);

感谢@mjkaufer建议将容器放在体内！为了达到我想要的效果，我确实必须使用负边距，但我相信它现在是一个可行的解决方案：）

Chrome扩展程序 - 与具有JS错误的网页进行交互

1 个答案: