Test if your chrome browser is ready
Anatomy of a plugin
As in this article
Create a new chrome browser Plugin
Basically 4 steps are to be kept in mind
- Step 1 : Create a manifest.json file
- Step 2 : Create a background.js script
- Step 3 : Create a content.js script
- Step 4 : Interscript communication
- Step 5 : Settings & Storage
Step 1 : Create a manifest.json file
Important json variables are
- name
- version
- permissions
- browser_action
- content_scripts
- manifest_version
Error: Error: The storage API will not work with a temporary addon ID. Please add an explicit addon ID to your manifest. For more information see https://mzl.la/3lPk1aE. options.js:15:13
Sample manifest.json
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": false
}
],
"options_page": "options.html"
}
Step 2: Create a background.js script
let color = '#3aa757';
let timeOuts4Messaging;
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ color });
console.log('Default background color set to %cgreen', `color: ${color}`);
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script, URL is :" + sender.tab.url :
"from the extension");
console.log(request.greeting)
if (request.greeting === "2.content2Bg")
{
sendResponse({farewell: "goodbye to content from bg"});// this will not work if called in popup
timeOuts4Messaging = setTimeout(sendMessage2Content,1000)
}
});
function sendMessage2Content()//https://developer.chrome.com/docs/extensions/mv3/messaging/
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "3.bg2Content"}, function(response) {
console.log(response.farewell);
});
});
// to send to popup 'chrome.runtime' is used instead of chrome.tabs.sendMessage
chrome.runtime.sendMessage({greeting: "5.bg2Popup"}, function(response) {
console.log(response.farewell);
});
clearTimeout(timeOuts4Messaging);
}
Step 3: Create a content.js script
chrome.runtime.onMessage.addListener( //https://developer.chrome.com/docs/extensions/mv3/messaging/
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script, URL is :" + sender.tab.url :
"from the extension");
console.log(request.greeting);
if (request.greeting === "1.popup2Content")
{
sendResponse({farewell: "goodbye to popup from content"});
send2Bg();
}
if (request.greeting === "3.bg2Content")
{
sendResponse({farewell: "goodbye to BG from content"});
}
}
);
function send2Bg()
{
chrome.runtime.sendMessage({greeting: "2.content2Bg"}, function(response) {
console.log(response.farewell);
timeOuts4Messaging = setTimeout(send2Popup,1000)
});
}
function send2Popup()
{
chrome.runtime.sendMessage({greeting: "4.content2Popup"}, function(response) {
console.log(response.farewell);
});
}
//console.log("contest is loaded");
Step 3: popup.js
// Initialize butotn with users's prefered color
let changeColor = document.getElementById("changeColor");
chrome.storage.sync.get("color", ({ color }) => {
changeColor.style.backgroundColor = color;
});
// When the button is clicked, inject setPageBackgroundColor into current page
changeColor.addEventListener("click", async () => {
sendMessage2Content();
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setPageBackgroundColor,
});
});
// The body of this function will be execuetd as a content script inside the
// current page
function setPageBackgroundColor() {
chrome.storage.sync.get("color", ({ color }) => {
document.body.style.backgroundColor = color;
});
}
function sendMessage2Content()//https://developer.chrome.com/docs/extensions/mv3/messaging/
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "1.popup2Content"}, function(response) {
console.log(response.farewell);
});
});
}
chrome.runtime.onMessage.addListener( //https://developer.chrome.com/docs/extensions/mv3/messaging/
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script, URL is :" + sender.tab.url :
"from the extension");
console.log(request.greeting);
if (request.greeting === "4.content2Popup")
{
sendResponse({farewell: "goodbye to content from popup"});
}
if (request.greeting === "5.bg2Popup")
sendResponse({farewell: "goodbye to BG from popup"});
}
);
Interscript communication
-
To send message from content to background or popup
chrome.runtime.sendMessage
-
To send ro content from background or popup
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {greeting: "1.popup2Content"}, function(response) { console.log(response.farewell); }); });
-
set listener
chrome.runtime.onMessage.addListener( //https://developer.chrome.com/docs/extensions/mv3/messaging/ function(request, sender, sendResponse) { console.log(sender.tab ? "from a content script, URL is :" + sender.tab.url : "from the extension"); console.log(request.greeting); if (request.greeting === "4.content2Popup") { sendResponse({farewell: "goodbye to content from popup"}); } if (request.greeting === "5.bg2Popup") sendResponse({farewell: "goodbye to BG from popup"}); } );
-
send reply message to content
sendResponse({farewell: "goodbye to BG from popup"});
-
send response after executing required function
function sendMessage2Content()//https://developer.chrome.com/docs/extensions/mv3/messaging/
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "3.bg2Content"}, function(response) {
console.log(response.farewell);
});
});
// to send to popup 'chrome.runtime' is used instead of chrome.tabs.sendMessage
chrome.runtime.sendMessage({greeting: "5.bg2Popup"}, function(response) {
console.log(response.farewell);
});
clearTimeout(timeOuts4Messaging);
}
Step 4: Settings & Storage
Add manifest.json keys to setup a settings page
- in manifest.json, add the following
"options_page": "options.html",
"permissions": ["storage"],
- code to set option value in storage
chrome.storage.sync.set({ "color" : '#3aa757' });// code to set value in storage
- code to retrieve from storage
chrome.storage.sync.get("color", (data) => { let currentColor = data.color;
References
- Intro
- Interscript communication
- For setting up a settings page with storage
- Anatomy of a
firefox
browser plugin - Background scripts
- Content scripts
- Options
- User Interface
- Popup
- Persistant Connections ie port
|
|