我在Chrome扩展中嵌入了一个Google表单。然而,因为:https://developer.chrome.com/extensions/faq#faq-persist-popups
每当有人点击扩展弹出窗口外部时,它就会关闭扩展。有没有办法让我的对话框弹出,以便用户可以自由地点击活动选项卡并在表单中进行记录?
manifest.json
中,应将iframe html文件列为web可访问资源。manifest.json
文件中定义浏览器操作(不要指定popup属性),并使popup.html
成为可访问的网页:{
"name": "My extension",
...
"browser_action": {
"default_icon": { // optional
"19": "images/icon19.png", // optional
"38": "images/icon38.png" // optional
}
},
"web_accessible_resources": ["popup.html"]
}
2) 创建popup.html
文件,其中包含弹出窗口的HTML和CSS;
3) 创建background.js
脚本,该脚本将侦听浏览器操作单击并将消息发送到内容脚本:
chrome.browserAction.onClicked.addListener(function (tab){
chrome.tabs.sendMessage(tab.id, 'browser_action_click', function(callback_data) {
});
})
4) 在您的content_script.js
中监听来自后台的浏览器操作点击消息,并显示/隐藏iframe:
var show = false;
var controller = {
insertIframe: function (){
var iFrame = document.createElement("iframe");
iFrame.setAttribute('style', '');
iFrame.setAttribute('id', 'popup_iframe');
iFrame.src = chrome.extension.getURL ("popup.html");
if (document.body) {
//sometimes document body is not loaded yet. Just skip
document.body.insertBefore(iFrame, document.body.firstChild);
}
},
getIframe: function() {
return document.getElementById('popup_iframe');
},
hideIframe: function() {
var iframe = this.getIframe();
iframe.style.display = 'none';
},
showIframe: function() {
var iframe = this.getIframe();
iframe.style.display = 'block';
},
listenForMessages: function() {
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
switch(request) {
case 'browser_action_click':
show = !show;
show ? this.showIframe() : this.hideIframe();
}
return true;
}.bind(this));
}
};
controller.insertIframe();
controller.listenForMessages();
chrome.windows.create
创建一个独立的窗口,其中type: "popup"
。
但是请注意,没有办法使其保持在顶部。