https://nicopr.fr/chromextensions
https://developer.chrome.com/extensions
WebExtension toolkit for Chromium-based browsers Firefox compat is coming soon, there will be a few differences.
install :
- load unpacked extension in Chrome Developper Mode
- copy extension ID from extensions page
- paste extension ID in {ExtensionDir}/resources/web.js : line 10
There are two ways to communicate :
- ports : messages are sent through Port objects
- runtime : messages are sent using API methods :
- chrome.runtime.sendMessage
- chrome.tabs.sendMessage
- window.postMessage
This project aims to unify runtime and port messaging, and make extensions development fast and easy
Port messaging is pretty simple : all messages piped through background script
Runtime messaging is ugly, and may be UNSTABLE :
- Background :
- can send to content via chrome.tabs
- cannot send to web (window.postMessage)
send through content (chrome.tabs > window.postMessage)
- can send to popup via chrome.runtime
- Content :
- can send to background via chrome.runtime
- can send to web via window.postMessage
same tab only, send to other web script through background > content > window.postMessage
- can send to popup via chrome.runtime
- Web :
- can send to background via chrome.runtime
- cannot send to content (chrome.tabs)
send through background (chrome.runtime > chrome.tabs)
- can send to popup via chrome.runtime
- Popup :
- can send to background via chrome.runtime
- can send to content via chrome.tabs
- cannot send to web (window.postMessage)
send through content (chrome.tabs > window.postMessage)
ports : BackgroundPort, ContentPort, WebPort, PopupPort
message : BackgroundMessage, ContentMessage, WebMessage, PopupMessage
TODO
ExtensionBackgroundScript : background script, access chrome apis, relay messages
ExtensionContentScript : extension script, injected in every page matching manifest url rules
ExtensionWebScript : web script, injected in website execution context
ExtensionPopupScript : popup script, extension settings UI (top right icon)
Communications are included in scripts, define COMM_TYPE in resources/base/extbase.js to choose ports or messages
Methods to send messages :
toBackground(type, message, callback, ...args); // send message to background script
toContent(tabid, type, message, callback, ...args); // send message to content script
toWeb(tabid, type, message, callback, ...args); // send message to web script
toPopup(type, message, callback, ...args); // send message to popup script
Override these methods to receive messages :
fromBackground(type, message, callback)
fromContent(tabid, type, message, callback)
fromWeb(tabid, type, message, callback)
fromPopup(type, message, callback)
overload arguments "...args" are passed back to callback method with the message result
In background script :
this.toContent({tabId}, "myType", {my: "message"}, myCallback.bind(this), "overload0", 1, {over: "load2"});
Triggers "fromBackground" method defined in extension content script
fromBackground(type, message, callback) {
console.log(type, "message from bg :", message); // "myType" message from bg : {my: "message"}
// some code
if(message.my == "message") doMoreThings();
callback({some: "results"}); // fires callback method passed to "toContent" method in background script
// OR IN LATER ASYNC CALL
setTimeout(callback, 1000, {some: "results"}̀);
return true; // or callback will be fired by super class
}
Triggers background script callback passed to toContent() call
myCallback(result, overload0, overload1, overload2) {
console.log(result); // {some: "results"}
console.log(overload0, overload1, overload2); // "overload0", 1, {over: "load2"}
}
receive methods MUST return true if async callback is needed !
fromBackground fromContent fromWeb fromPopup
if return false the callback will be fired synchronously with null result
if callback is not needed, pass the message without callback arg