Javascript 在chrome扩展的iframe中使用Twitter引导JS

我正在开发一个chrome扩展，它通过在渲染时附加事件监听器，在动态创建的元素上使用引导折叠（v2.3.2）功能。我遇到了一个问题，当我加载扩展时，在父页面上使用collapse不再有效。我测试了这个，并且能够复制。在示例中，当我的扩展正常工作时，折叠停止工作。我想在加载bootstrap.js版本时，全局jQuery对象肯定受到了一些污染

这是我清单的脚本部分：

"content_scripts": [{
  "run_at": "document_start",
  "matches": ["<all_urls>"],
  "js": [
    "js/vendor/jquery-min.js",
    "js/vendor/bootstrap.min.js",
    "js/content_script.js",
  ]
}]

我的扩展的生命周期是：

加载内容_脚本（使用扩展加载的jquery和引导作为内容_脚本）

初始化并注入iframe

异步获取数据并在iframe中作为HTML注入

调用render，将单击侦听器附加到iframe中的元素

因此，为了澄清，我的扩展工作正常，但我正在破坏也使用bootstrap.js的页面

---

作为一个可能的解决方案，我尝试将bootstrap.js移动到一个可访问web的资源，并将其加载到模板中。但是，这样做之后，调用

target.collapse

会导致一个错误（不是函数），因为我的扩展使用的jquery没有通过加载bootstrap.js进行修改——我甚至不确定扩展是否正确地在iframe中加载bootstrap。

我的解决方案非常迂回。我最终创建了一个可以在运行时注入的脚本，并将其作为

web\u可访问的\u脚本

公开

//manifest.json
"web_accessible_resources": [
  "js/bootstrap.min.js",
  "js/injected_script.js"
]


//injected_script.js
document.addEventListener('toggle-collapse', function (e) {
  var targetName = e.detail.targetName;
  var $iframe = $('#extension_iframe');
  var target = $iframe.contents().find(targetName)
  target.collapse('toggle')
}, false);

引导和注入的脚本在运行时通过jquery追加：

var injectedLink = chrome.extension.getURL('js/injected_script.js');
var bootstrapLink = chrome.extension.getURL('js/bootstrap.min.js');

var $iframeHead = iframe.contents().find('html').find('head')
injectScript($iframeHead, injectedLink);
injectScript($iframeHead, bootstrapLink);

function injectScript ($parent, url) {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = url;
    $parent.append(s);
}

然后，我用一个自定义事件替换了对

.collapse（'toggle'）

的调用，该事件可以“抛出墙外”到我的注入脚本中

//content_script.js
document.dispatchEvent(new CustomEvent('toggle-collapse', {
    detail: {
        targetName: targetName
    }
}));

通过这种方式，我能够在扩展中为iframe加载引导，并能够与扩展使用的jquery通信。所有这些都不会污染DOM。

我认为如果您使用onclick处理程序以及jQuery和bootstrap.js进入iframe，它会起作用。

//content_script.js
document.dispatchEvent(new CustomEvent('toggle-collapse', {
    detail: {
        targetName: targetName
    }
}));