为什么我的内容脚本不能使用已经注入的脚本？

对于我的Chrome扩展程序，我注入了使用content.js加载模式所需的Javascript文件和CSS文件。注入成功，我看到DOM中的这两个文件。为什么我的内容脚本不能使用已经注入的脚本？

然后我发送消息给background.js来做一些事情，这也起作用了，因为我从那里收到消息。但我的模式无法加载，因为它似乎不能使用注入的JavaScript文件。

假设我有一个将文件注入DOM的函数。我们称之为inject()。我在content.js文件的开头调用了该函数，并且它们被成功注入。但是，当我从background.js回来消息并尝试加载模式时，它会失败。

如果我再次尝试呼叫inject()函数在chrome.runtime.sendMessage函数中，模式成功加载。

在content.js我有以下代码。无论何时用户单击当前页面上的链接，我都会向后台脚本发送消息。

chrome.runtime.sendMessage(link,function(response){ 
    inject(); //Now the modal loads. But if I remove this, the modal fails to load.  
    loadModalFunction(response); 
});

我的问题则是，如果我已经注射modal.js和modal.css只要在页面加载，为什么我需要再次注入文件加载模式？每当用户点击页面上的链接时，我的扩展程序就会加载模块。所以我担心的是，如果我不得不在用户点击某些东西时将这两个文件注入到DOM中，那么会导致页面变慢。

更新与更多的代码：

在content.js：

function injectStuffs(){ 
    var jquery = chrome.extension.getURL("jquery-1.11.3.min.js"); 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = jquery; 
    $("head").append(script); 

    var modaljs = chrome.extension.getURL("modal.js"); 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = modaljs; 
    $("head").append(script); 

    var link = document.createElement("link"); 
    link.href = chrome.extension.getURL("modal.css"); 
    link.type = "text/css"; 
    link.rel = "stylesheet"; 
    $("head").append(link); 
} 

injectStuffs() //Inject the scripts into ```DOM``` 

$(document).on('click', '.readmore a', function(event) { 
    event.preventDefault(); 
    var link = $(this).attr('href'); 

    chrome.runtime.sendMessage(link,function(response){ 
     injectStuffs() //I need to inject here again to load the modal up. Why? 
     loadModal(response); 
    }); 
});

来源

2015-11-11 Zip

我已更新该帖子的更多代码。请看一下。 '''loadModal（）'''函数和'''background.js''工作得很好，所以我不在这里包括它们。我也在'''manifest'''文件中拥有所有必要的权限。 – Zip

如果该页面也使用jQuery，那么你应该使用'jQuery.noConflict（）'，这里有很多例子。如果我的猜测是正确的，这个问题是重复的。 – wOxxOm

请说明你的'content.js'是如何注入的（或相关的清单条目） – Xan

实际上，我惊讶的是，调用injectStuffs()第二次工作！我相信问题是由您的内容脚本运行的“孤立的世界”造成的：

内容脚本在称为孤立世界的特殊环境中执行。他们可以访问他们注入的页面的DOM，但不能访问页面创建的任何JavaScript变量或函数。它会查看每个内容脚本，就好像其上运行的页面上没有执行其他JavaScript一样。 [reference]

当你列出你的清单内容脚本的js财产JavaScript文件，所有这些文件都被认为是内容脚本的一部分，因此每个文件可以看到函数/变量在其他人中定义（但不在页面中）。

相反，当你写<script>元素到DOM注入JavaScript文件，这些文件被认为是的页面的一部分，所以你的内容脚本不能看到他们所定义的函数/变量。

在您的情况
所以，content.js是在你的内容脚本，但jQuery的1.11.3.min.js和modal.js是在页面中。这就是为什么content.js不能拨打loadModal()。

你可能想jQuery的1.11.3.min.js和modal.js添加到您的内容脚本在清单中。但是如果你真的要需要在运行时决定是否加载JavaScript文件，那么请参阅文档programmatic injection。

来源

2015-12-24 19:54:10

为什么我的内容脚本不能使用已经注入的脚本？

回答

相关问题