- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
对于我的 Chrome 扩展程序,我通过使用 content.js
注入(inject)了模态加载所需的 Javascript 文件和 CSS 文件。注入(inject)成功,我在 DOM 中看到了这两个文件。
然后我向 background.js
发送一条消息来做一些事情,这也有效,因为我从那里收到了返回的消息。但是我的模式无法加载,因为它似乎无法使用注入(inject)的 Javascript 文件。
假设我有一个将文件注入(inject) DOM 的函数。我们称它为 inject()
。我在 content.js
文件的开头调用了这个函数,它们被成功注入(inject)。但是当我从 background.js
返回消息并尝试加载模态时,它失败了。
如果我再次尝试在 chrome.runtime.sendMessage
函数中调用 inject()
函数,模态会成功加载。
在 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);
});
我的问题是,如果我已经在页面加载后注入(inject)了 modal.js
和 modal.css
,为什么我需要再次注入(inject)这些文件加载模态?每当用户单击页面上的链接时,我的扩展程序都会加载模式。所以我担心的是,如果我必须在用户单击某些内容时将这两个文件注入(inject) 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);
});
});
最佳答案
实际上我很惊讶调用 injectStuffs()
第二次有效!我认为问题是由您的内容脚本运行的“孤立世界”引起的:
Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. [reference]
当您在 js
中列出 JavaScript 文件时 list 中内容脚本的属性,所有这些文件都被视为内容脚本的一部分,因此每个文件都可以看到其他文件中定义的函数/变量(但不是页面中的).
相比之下,当您通过编写 <script>
来注入(inject) JavaScript 文件时DOM 元素,这些文件被认为是页面的一部分,因此您的内容脚本看不到其中定义的函数/变量。
所以在你的情况下,content.js 在你的内容脚本中,但是 jquery-1.11.3.min.js 和 modal.js 在页面中。这就是 content.js 无法调用 loadModal()
的原因.
您可能希望将 jquery-1.11.3.min.js 和 modal.js 添加到 list 中的内容脚本中。但是,如果您真的需要在运行时决定是否加载 JavaScript 文件,请参阅 programmatic injection 的文档。 .
关于javascript - 为什么我的内容脚本不能使用已经注入(inject)的脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33642035/
我已阅读有关依赖注入(inject)的信息。然后来了 构造函数注入(inject), setter/getter 注入(inject) 二传手注入(inject) 接口(interface)注入(in
我正在研究依赖注入(inject)模式。我看过很多例子,其中一个典型的例子是使用 XxxService/XxxRepository 作为例子。但是在我看来,按照UML的概念,类XxxRepositor
我开始使用 Google Guice。 我有一个简单的问题: javax.inject 的 @Inject 注释和 com.google.inject 的 有什么区别@Inject 一个 ? 谢谢。
当使用构造函数注入(inject)工厂方法时,依赖的属性不会得到解析。但是,如果在解析依赖的组件之前解析了工厂方法,则一切都会按预期工作。此外,当仅使用属性注入(inject)或构造函数注入(inje
我有这样的事情: class Root { public Root(IDependency dep) {} } class Dependency:IDependency { p
听完Clean Code Talks ,我开始明白我们应该使用工厂来组合对象。因此,例如,如果 House有一个 Door和 Door有一个 DoorKnob , 在 HouseFactory我们创建
情况:我需要在一些 FooClass 中进行惰性依赖实例化,所以我通过 Injector类作为构造函数参数。 private final Injector m_injector; public Foo
在编写代码时,我们应该能够识别两大类对象: 注入(inject)剂 新品 http://www.loosecouplings.com/2011/01/how-to-write-testable-cod
这个问题是关于 Unity Container 的,但我想它适用于任何依赖容器。 我有两个具有循环依赖关系的类: class FirstClass { [Dependency] pub
如果我有 10 个依赖项我需要注入(inject)并且不想在构造函数中有 10 个参数,我应该使用哪种注入(inject)模式? public class SomeClass { privat
我在使用 Angular2 DI 时遇到了问题。我尝试将一个类注入(inject)另一个类,它引发了以下错误: 留言:"Cannot resolve all parameters for 'Produ
对依赖注入(inject)还很陌生,我想弄清楚这是否是一种反模式。 假设我有 3 个程序集: Foo.Shared - this has all the interfaces Foo.Users -
我正在尝试了解 Angular 14 的变化,尤其是 inject()我可以将模块注入(inject)功能的功能,我不需要为此创建特殊服务..但我想我弄错了。 我正在尝试创建一些静态函数来使用包 ng
希望这个问题不是太愚蠢,我试图掌握更高级的编程原理,因此试图习惯使用 Ninject 进行依赖注入(inject)。 因此,我的模型分为几个不同的 .dll 项目。一个项目定义了模型规范(接口(int
我最近一直在大量使用依赖注入(inject)、测试驱动开发和单元测试,并且开始喜欢上它。 我在类中使用构造函数依赖,这样我就可以为单元测试注入(inject)模拟依赖。 但是,当您实际需要生产环境中的
我有下面的代码来使用 Guice 进行依赖注入(inject)。第一个是使用构造函数注入(inject),而另一个是直接在字段上方添加 @Inject。这两种方式有什么区别吗? Guice官网似乎推荐
这个问题在这里已经有了答案: Angular2 Beta dependency injection (3 个答案) 关闭 7 年前。 我正在使用 angular2 测试版。并在使用 @Inject
有没有可能做这样的事情? (因为我尝试过,但没有成功): @Injectable() class A { constructor(private http: Http){ // <-- Injec
我很恼火必须通过 Constructor 传递管道对象,因为我想为业务实体或要传递的值保留构造函数参数。 所以我想通过 setter ,但只要这些 setter 没有被填充,我的包含依赖项的对象就不应
假设我有这个: SomePage.razor: @inject Something something @page "/somepage" My Page @code { // Using
我是一名优秀的程序员,十分优秀!