0%

Chrome插件开发使用补充

最近一直在开发插件,踩了些坑,这里总结下。

popup程序化弹出?

popup是不支持程序化弹出的,可以曲线解决的方案是,开启新window,打开popup.html即可。

1
2
3
4
5
6
7
8
9
 chrome.windows.create({
url: `popup.html`,
type: 'popup',
height: 640,
width: 357,
left: 100,
top: 100,
focused: true,
})

window resize禁用

1
2
3
4
5
6
7
8
9
10
const size = [document.body.clientWidth, document.body.clientHeight];  

/**
* 禁止修改 popup弹窗大小,new window时无法直接设置禁用resize,因此通过该方法解决
*/
function resizeThrottler() {
window.resizeTo(size[0], size[1]);
}

window.addEventListener('resize', resizeThrottler, false);

消息通讯

chrome extension中资源分三种,popup/content/background,能够与网页直接通讯的是content,因此如果是popup向网页发消息。可以发给content,然后content转发消息给网页即可。

content.js中接收消息使用chrome.runtime.onMessage,而发送消息给网页使用window.postMessage

1
2
3
4
5
6
chrome.runtime.onMessage.addListener(
(message, sender, sendResponse) => {
window.postMessage(message, '*');
return true;
},
);

popup向content.js发送消息使用chrome.tabs.sendMessage

1
chrome.tabs.sendMessage(tabId, message);

同时,Chrome也可以接收网页发送过来的消息

网页发送消息给extension使用chrome.runtime.sendMessage

1
2
3
4
5
6
7
8
9
10
var hasExtension = false;
const extensionId = 'bmkmhpkgcbigmdepppdpdhlifcgoibph';
chrome.runtime.sendMessage(extensionId, {operation: "installCheck"},
function (reply) {
if (reply && reply.data.version) {
hasExtension = true;
} else {
hasExtension = false;
}
});

extension-background接收消息使用chrome.runtime.onMessageExternal.addListene

1
2
3
chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) => {

})

chrome.runtime返回undefined

网页向拓展发送消息,需要确保设置中externally_connectable能够命中网页,否则chrome.runtime返回undefined

举个配置例子

1
2
3
4
5
6
7
"externally_connectable": {
"matches": [
"http://*/*",
"https://*/*",
"http://127.0.0.1/*"
]
}

需要注意http://*/*https://*/*无法命中IP地址及localhost域名,因此内网网址这些,需要单独配置,注意端口号不需要考虑,默认都是通配。

popup最大宽高

宽度最大800px,高度最大600px。HTML标签层面会强制给予该大小,如果子标签宽高大于该值,会滚动显示。

推荐尺寸600px高,357px宽

脚手架

https://github.com/alanhg/chrome-extension-react-typescript-boilerplate

写在最后

先写到这儿,持续更新

相关文档