This content originally appeared on Bits and Pieces - Medium and was authored by Bhagya Vithana
Introducing Chrome Scripting API and Manifest V3
Chrome Scripting API is one of the latest features introduced to the Chrome browser extension platform. It is a part of the Manifest V3 update and capable of injecting JavaScript and CSS into websites using Chrome.
In this article, I will discuss some of the core features of Chrome Scripting API to give you a better understanding of it.
What is Chrome Scripting API?
Chrome Scripting is a new namespace added in Manifest V3.
It replaces the Tab API methods of Manifest V2 and can inject scripts and styles into websites. For example, chrome.tabs.executeScript and chrome.tabs.insertCSS methods have been moved from Tab API to Chrome Scripting API with the MV3 update.
Reasons to Introduce a New Namespace for Scripting?
As I mentioned, most of the scripting functions was already a part of Tab API. So, why did Chrome introduce a new namespace for scripting?
There are several reasons behind this decision, and I have listed 3 major reasons out of them below:
1. Reduces the workload on Tab API
Tab API was overloaded with various functionalities like tab management, selection management, window organization, and navigation in recent years. Moreover, some of these functions need permission handling, and developers often got confused them with scripting capabilities.
Introduction of Scripting API resolves this by taking away all the scripting functionalities from Tab API.
2. Security vulnerabilities in Script API
If we consider the executeScript API, it permits extensions to execute an arbitrary string of code in target tabs. This behavior open doors for malicious developers to get an arbitrary scripts from a remote server and run it inside any page.
3. More scripting capabilities
One of the main purposes of the Manifest V3 update was to bring more scripting capabilities to the Chrome extension platform. Now, it has features like dynamic content scripts, target-specific frames, and target non-tab contexts compared to Manifest V2.
I think now you understand what Scripting API is and the reasons why it was introduced. So, let’s see what the major differences between Scripting API and Tab API are.
Chrome Scripting API vs Tab API
Although the Scripting API was introduced to move features from Tab API, we can see several major feature improvements. So, I will take some example usage from both chrome.tabs.executeScript and chrome.scripting.executeScript functions and highlight the differences for you.
1. Allows targeting multiple frames with a single API call
In Manifest V2, developers were only allowed to target all the frames in a tab or a single specific tab. For example, the below code shows how we can get all the frames at once and execute scripts on them one by one.
// Manifest V2
chrome.browserAction.onClicked.addListener((tab) => {
chrome.webNavigation.getAllFrames({tabId: tab.id}, (frames) => {
let frame1 = frames[0].frameId;
let frame2 = frames[1].frameId;
chrome.tabs.executeScript(tab.id, {
frameId: frame1,
file: 'content-script.js',
}); chrome.tabs.executeScript(tab.id, {
frameId: frame2,
file: 'content-script.js',
});});
})
But, with the Manifest V3 update, we can execute scripts on multiple selected frames at once.
Manifest V3 update has replaced the frameId property of Tab API with a new property named frameIds which accepts multiple frame ids at once. So, if we consider the above example again, now we can select both frames at once to execute the script.
// Manifest V3
chrome.action.onClicked.addListener(async (tab) => {
let frames = await chrome.webNavigation.getAllFrames({tabId: tab.id});
let frame1 = frames[0].frameId;
let frame2 = frames[1].frameId;
chrome.scripting.executeScript({
target: {
tabId: tab.id,
frameIds: [frame1, frame2],
},
files: ['content-script.js'],
});});
Note: Also, you can execute multiple scripts at once since the files property accepts scripts as an array.
2. Allows extensions to inject functions as a content script
In Manifest V2, the only way to inject a script into a web page was to build a dynamic code string.
For example, if you want to run a script when users click on the actions button, you need to fetch the script file, build a dynamic code like below, and then execute it.
// Manifest V2
chrome.browserAction.onClicked.addListener(async (tab) => {
let response = await fetch('../script.js');
let userScript = await response.text();
chrome.tabs.executeScript({
code: userScript,
});
});Manifest V3 has improved this process, and now we can directly pass functions and arguments to executeScripts function. For example, we can write the same function with Manifest V3 and pass the function name and the argument using func and args attributes.
// Manifest V3
function welcometUser(name) {
alert(`Welcome, ${name}!`);
}chrome.action.onClicked.addListener(async (tab) => {
let response = await fetch('../script.js');
let user = await response.json();
let name= user.name|| '<NAME>';
chrome.scripting.executeScript({
target: {tabId: tab.id},
func: welcometUser,
args: [name],
});
});3. Improvements in returning script injection results
Another major improvement we can notice is the method of script injection results are returned. If we consider the executeScript function with Manifest V2, it will return an array of plain execution results.
In Manifest V3, functions are capable of returning arrays of Objects.
In addition, those results objects indicate the frame id for each result, making it much easier for developers to take actions based on them.
// Manifest V3
chrome.action.onClicked.addListener(async (tab) => {
let results = await chrome.scripting.executeScript({
target: {tabId: tab.id, allFrames: true},
files: ['script.js'],
});// results == [
// {frameId: 0, result: x},
// {frameId: 1235, result: y},
// {frameId: 1234, result: z}
// ]
Conclusion
In this article, I introduced Chrome Scripting API and the reasons behind introducing a separate API for scripting.
Although most of the features are similar to Manifest V2 Tab API, there are several exciting improvements in the Manifest V3 update.
So, I encourage you to get familiar with those to improve your Chrome extension development skills.
Thank you for reading !!!
Tip: Build with independent components, for speed and scale
Instead of building monolithic apps, build independent components first and compose them into features and applications. It makes development faster and helps teams build more consistent and scalable applications.
Bit offers a great developer experience for building independent components and composing applications. Many teams start by building their Design Systems or Micro Frontends, through independent components.
Give it a try →
Final thoughts!!
In this article, I’ve covered what I believe to be the most important aspects of the chrome.scripting API.
This is just the tip of the iceberg. If you want to learn more, the official Chrome documentation is quite comprehensive. I would like to encourage you to take a look around and experiment to play around with this extension. If you have any questions, please leave them in the comments section.
Thank you for Reading !!!
Learn More!!
- Building Chrome Extensions 101
- Google Chrome Hidden Features Every Developer Should Know
- Grid Editing Made Simple with Chrome DevTools
What is Chrome Scripting API? was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Bhagya Vithana
Bhagya Vithana | Sciencx (2021-11-10T21:13:33+00:00) What is Chrome Scripting API?. Retrieved from https://www.scien.cx/2021/11/10/what-is-chrome-scripting-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.