scripting

This permission is essential for nearly any extension that needs to modify or read the content of web pages.

Examples:

• A password manager that injects a script to fill login forms.
• A "dark mode" extension that inserts a custom stylesheet.
• A web-clipping tool that executes a script to extract selected content.
• An ad-blocker that dynamically registers scripts to block certain resources.

The scripting permission requires host permissions for the sites where you want to run scripts. You can get these permissions by either requesting them upfront in host_permissions or temporarily by using the activeTab permission.

{
  "name": "My Scripting Extension",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "scripting"
  ],
  "host_permissions": [
    "https://*.example.com/*"
  ],
  "action": {}
}

Why is it risky?

This permission allows an extension to run its own code on the websites you visit. It is one of the most common and powerful permissions. An extension with this ability can essentially do anything you can do on a webpage.

A malicious extension could use this to:

• Steal your passwords and credit card numbers as you type them.
• Read your private information, like emails or bank balances.
• Insert ads or malware into pages you visit.
• Change the content of websites to trick you.

When an extension asks for this permission for "all websites", it is asking for a huge amount of trust. The safest extensions use the activeTab permission instead, which only grants this power for the current page when you click the extension's icon.

This example injects a script to change the background color of example.com pages.

// background.js

// This listener fires when the user navigates to a new page
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // Check if the tab has finished loading and the URL matches
  if (changeInfo.status === 'complete' && tab.url && tab.url.includes('example.com')) {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      func: changeBackgroundColor, // The function to execute
      args: ['#f0f8ff']        // Arguments to pass to the function
    }).then(() => {
      console.log("Injected a background color change script.");
    }).catch(err => console.error(err));
  }
});

// This function will be executed in the context of the web page
function changeBackgroundColor(color) {
  document.body.style.backgroundColor = color;
}