gpt4 book ai didi

javascript - Chrome 扩展程序弹出窗口不止一次注入(inject) javascript

转载 作者:行者123 更新时间:2023-11-29 21:42:25 25 4
gpt4 key购买 nike

我才刚刚开始学习如何进行扩展...

我想要它,以便当弹出窗口首次打开时,它会将 javascript 注入(inject)事件选项卡。弹出窗口中还有一些按钮与注入(inject)的 javascript 交互。

我遇到的问题是每次打开弹出窗口时,它都会将 javascript 注入(inject)事件选项卡。每次发生这种情况时,所有保存的变量都会被重置。所以,我最终只是制作了一个全局变量来解决这个问题。

这是我使用的代码示例:

弹出窗口

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Extension</title>
<link href="popup.css" rel="stylesheet">
<script src="popup.js"></script>
</head>

<body>
<div class="controls">
<div class="action1">action 1</div>
<div class="action2">action 2</div>
</div>
</body>
</html>

弹出窗口

var command = {
action1 : function(){
chrome.tabs.executeScript(null, {
code: 'myExtension("action1");'
});
},
action2 : function(){
chrome.tabs.executeScript(null, {
code: 'myExtension("action2");'
});
}
};

chrome.windows.getCurrent( function(win) {
chrome.tabs.query({
'windowId': win.id,
'active': true
}, function(tabArray) {

// windows.done pretty much doesn't do anything
if ( !window.done ) {
chrome.tabs.insertCSS( tabArray[0].id, {
file: 'myextension.css'
});

chrome.tabs.executeScript(null, {
file: 'myextension.js'
}, function(){
window.done = true;
chrome.tabs.executeScript(null, {
code: 'myExtension("init");'
});
});
}

// action1
var el = document.querySelector( '.action1' );
el.removeEventListener( 'click', commands.action1 );
el.addEventListener( 'click', commands.action1 );

// action2
var el = document.querySelector( '.action2' );
el.removeEventListener( 'click', commands.action2 );
el.addEventListener( 'click', commands.action2 );

});
});

在我的 myextension.js 文件中,我做了这样的事情,这样我就不会丢失需要保存的内部变量:

(function(){

window.myExtension = function( command ) {
if ( typeof myExtensionVariables === 'undefined' ) {
window.myExtensionVariables = {
que : [],
flags : {}
}
}
if ( command === 'init' ) {
// initialize!
}

// etc

};

})();

我认为我不需要 background.htmlbackground.js

我真正想要的是防止 javascript 注入(inject)发生不止一次。

有什么建议吗?

最佳答案

如果注入(inject)的内容脚本的大小有问题,则注入(inject)一小段代码来检查状态:

chrome.tabs.executeScript({code: "window.myExtensionVariables"}, function(result) {
if (!result[0]) {
/* inject the script */
}
});

全局变量 myExtensionVariables 不是问题,因为只有注入(inject)的内容脚本才能看到它,网页看不到。

至于popup脚本中的window.donewindow指的是popup miniwindow,不是网页,所以确实没用。

总的来说,我会坚持使用您的实现,因为它是最简单的实现。否则,您必须跟踪 webNavigation 事件,并在 chrome.storage 或持久后台页面中维护带有注入(inject)脚本的选项卡 ID 列表。

关于javascript - Chrome 扩展程序弹出窗口不止一次注入(inject) javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32278340/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com