Today we are going to see how to make a google chrome extension and that it interacts with the dom of the current page.
The extension is simple, it will have an input in which you can write a label and when you click the button, these elements that are on the page will be added in a red border.
The complete code can be found in this repository
Files
Create the following files in your project folder:
- manifest.json
- popup.html
- popup.js
- background.js
Manifest.json
Let's start by creating a manifest.json file which is the one that will have the details of our extension such as (name, description) including its permissions.
{
"name": "Gettin started example",
"description": "i build a example for getting started",
"version": "1.0.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting"],
"action": {
"default_popup": "popup.html"
}
}
first we are indicating the name description and versions, continuing with the reading we will see the property background > service_worker which is very important since we must register the file that will be executed in the background in this case we have a file that will be called background.js
Here you can see more detailed what you can specify in your manifest.
Background.js
We will create a file called background.js to see how it works.
// background.js
chrome.runtime.onInstalled.addListener(function () {
console.log("Hello from background");
});
Start by including a listener event for runtime.onInstalled in your background script. Inside the onInstalled listener, the extension will show a console message here we can also set persistent variables etc.
Load the extension in our browser
We are going to go to the extension manager of our browser and we are going to activate the development mode.
We are going to click on the button that says load unpacked and we choose the folder that has our files.
We should see our extension loaded as in the image
Now we will click on the inspects view where it says service worker, a tab will open and in the console we will be able to see our message Hello from background
Well you already have a background file where you can execute scripts in the background now we will proceed to show a form in our extension.
Popup.html
As you may have already noticed, we have in our manifest a property called action: default_popup in which we indicate a file called popup.html in which we are going to put an html code with our form:
<!DOCTYPE html>
<html>
<body>
<p>Tag for change the border</p>
<input type="text" id="tagcolor" />
<button id="changeColor">Change</button>
<script src="popup.js"></script>
</body>
</html>
We have a script which we are going to create called popup.js and that is where we are going to write the logic but let's review the content of our html which has an input and a button with their respective ids to retrieve them with js and be able to do the logic.
Popup.js
In this file we are going to do several things, the first is to select our button by id
let changeColor = document.getElementById("changeColor");
Now we are going to add a click event to this button and in the asynchronous function we are going to select our input and thus have the value that we write.
changeColor.addEventListener("click", async() => {
let inputtag = document.querySelector("#tagcolor");
chrome.storage.sync.set({ inputtag: inputtag.value });
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setBorderColor,
});
});
function setBorderColor() {
chrome.storage.sync.get("inputtag", ({ inputtag }) => {
document.querySelectorAll(inputtag).forEach((element) => {
element.style.border = "1px solid red";
});
});
}
We will send the value of what we write in our input to our storage.sync to later access it from the setBorderColor function
chrome.storage.sync.set({ inputtag: inputtag.value });
After this we have to select the window in which we are and store it in a variable for this we use destructuring of arrays
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
We will send to execute a script on the screen in which we are with the following code
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setBorderColor,
});
Within this setBorderColor function, the document to which we will make a selection is already the one from the tab that we indicated, it is no longer our popup.html dom, this must be clear, outside the function, the document was the equivalent to the document of the popup.html of our extension.
Finally, in the setBorderColor function, what we do is obtain the persistent value that we created, which should be the name of a label, id or a class, and as a callback we will execute a querySelectorAll, we will go through the elements and change the style property. border:
function setBorderColor() {
chrome.storage.sync.get("inputtag", ({ inputtag }) => {
document.querySelectorAll(inputtag).forEach((element) => {
element.style.border = "1px solid red";
});
});
}
Now we are going to go to any page and we will put the name of a label in this case I will use div
Results :
Here, as you can see, we use various chrome tools such as storage, scripting, and tabs, which is why we define them from the beginning in our manifest.json.
I hope this has really helped you now it's your turn to practice and investigate.
Top comments (0)