In order to use the const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });1 API, you need to specify a const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });4 of const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });5 or higher and include the const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });6 permission in your manifest file.
"name": "Scripting Extension",
"manifest_version": 3,
"permissions": ["scripting"],
...
}
Usage
You can use the const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });1 API to inject JavaScript and CSS into websites. This is similar to what you can do with content scripts, but by using the const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });1 API, extensions can make decisions at runtime.
Injection targets
You can use the const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });9 parameter to specify a target to inject JavaScript or CSS into.
The only required field is const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });0. By default, an injection will run in the main frame of the specified tab.
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });
To run in all frames of the specified tab, you can set the const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });1 boolean to const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });2.
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });
You can also inject into specific frames of a tab by specifying individual frame IDs. For more information on frame IDs, see the webNavigation API.
const tabId = getTabId();const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });
You cannot specify both the const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });3 and const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });1 properties.
Injected code
Extensions can specify the code to be injected either via an external file or a runtime variable.
Files
Files are specified as strings that are paths relative to the extension's root directory. The following code will inject the file const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });5 into the main frame of the tab.
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });
Runtime functions
When injecting JavaScript with const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });6, you can specify a function to be executed instead of a file. This function should be a function variable available to the current extension context.
return document.title;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: getTitle,
},
() => { ... });
This function will be executed in the context of injection target. However, this will not carry over any of the current execution context of the function. As such, bound parameters (including the const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });7 object) and externally-referenced variables will result in errors. For instance, the following code will not work, and will throw a ReferenceError because const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });8 is undefined when the function executes:
function changeBackgroundColor() {
document.body.style.backgroundColor = color;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: changeBackgroundColor,
},
() => { ... });
You can work around this by using the const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });9 property:
function changeBackgroundColor(backgroundColor) {
document.body.style.backgroundColor = backgroundColor;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: changeBackgroundColor,
args: [color],
},
() => { ... });
Runtime strings
If injecting CSS within a page, you can also specify a string to be used in the const tabId = getTabId();
const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });0 property. This option is only available for const tabId = getTabId();
const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });1; you can't execute a string using const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });6.
const tabId = getTabId();
chrome.scripting.insertCSS(
{
target: {tabId: tabId},
css: css,
},
() => { ... });
Handling results
The results of executing JavaScript are passed to the extension. A single result is included per-frame. The main frame is guaranteed to be the first index in the resulting array; all other frames are in a non-deterministic order.
function getTitle() {return document.title;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
func: getTitle,
},
(injectionResults) => {
for (const frameResult of injectionResults)
console.log('Frame Title: ' + frameResult.result);
});
const tabId = getTabId();
const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });1 does not return any results.
Promises
If the resulting value of the script execution is a promise, Chrome will wait for the promise to settle and return the resulting value.
const tabId = getTabId();chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });0
Summary
Types
Methods
Types
ContentScriptFilter
Chrome 96+
Properties
ids
string[] optional
If specified, will only return scripts with an id specified in this list.
CSSInjection
Properties
css
string optional
A string containing the CSS to inject. Exactly one of const tabId = getTabId();
const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });5 and const tabId = getTabId();
const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });0 must be specified.files
string[] optional
The path of the CSS files to inject, relative to the extension's root directory. Exactly one of const tabId = getTabId();
const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });5 and const tabId = getTabId();
const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });0 must be specified.origin
optional
The style origin for the injection. Defaults to const tabId = getTabId();
const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });9.target
Details specifying the target into which to insert the CSS.
ExecutionWorld
Chrome 95+
The JavaScript world for a script to execute within.
Type
"ISOLATED"
, or"MAIN"
InjectionResult
Properties
documentId
string
Chrome 106+
The document associated with the injection.
frameId
number
Chrome 90+
The frame associated with the injection.
result
any optional
The result of the script execution.
InjectionTarget
Properties
allFrames
boolean optional
Whether the script should inject into all frames within the tab. Defaults to false. This must not be true if const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });3 is specified.documentIds
string[] optional
Chrome 106+
The of specific documentIds to inject into. This must not be set if const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId, allFrames: true},
files: ['script.js'],
},
() => { ... });3 is set.frameIds
number[] optional
The of specific frames to inject into.
tabId
number
The ID of the tab into which to inject.
RegisteredContentScript
Chrome 96+
Properties
allFrames
boolean optional
If specified true, it will inject into all frames, even if the frame is not the top-most frame in the tab. Each frame is checked independently for URL requirements; it will not inject into child frames if the URL requirements are not met. Defaults to false, meaning that only the top frame is matched.
css
string[] optional
The list of CSS files to be injected into matching pages. These are injected in the order they appear in this array, before any DOM is constructed or displayed for the page.
excludeMatches
string[] optional
Excludes pages that this content script would otherwise be injected into. See Match Patterns for more details on the syntax of these strings.
id
string
The id of the content script, specified in the API call. Must not start with a '_' as it's reserved as a prefix for generated script IDs.
js
string[] optional
The list of JavaScript files to be injected into matching pages. These are injected in the order they appear in this array.
matches
string[] optional
Specifies which pages this content script will be injected into. See Match Patterns for more details on the syntax of these strings. Must be specified for .
persistAcrossSessions
boolean optional
Specifies if this content script will persist into future sessions. The default is true.
runAt
optional
Specifies when JavaScript files are injected into the web page. The preferred and default value is const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });3.world
optional
Chrome 102+
The JavaScript "world" to run the script in. Defaults to const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });4.
ScriptInjection
Properties
args
any[] optional
Chrome 92+
The arguments to curry into a provided function. This is only valid if the const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });5 parameter is specified. These arguments must be JSON-serializable.files
string[] optional
The path of the JS or CSS files to inject, relative to the extension's root directory. Exactly one of const tabId = getTabId();
const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });5 and const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });5 must be specified.injectImmediately
boolean optional
Chrome 102+
Whether the injection should be triggered in the target as soon as possible. Note that this is not a guarantee that injection will occur prior to page load, as the page may have already loaded by the time the script reaches the target.
target
Details specifying the target into which to inject the script.
world
optional
Chrome 95+
The JavaScript "world" to run the script in. Defaults to const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });4.func
function optional
Chrome 92+
A JavaScript function to inject. This function will be serialized, and then deserialized for injection. This means that any bound parameters and execution context will be lost. Exactly one of const tabId = getTabId();
const frameIds = [frameId1, frameId2];
chrome.scripting.executeScript(
{
target: {tabId: tabId, frameIds: frameIds},
files: ['script.js'],
},
() => { ... });5 and const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });5 must be specified.The const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });5 function looks like: function getTitle() {
return document.title;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: getTitle,
},
() => { ... });2
StyleOrigin
The origin for a style change. See style origins for more info.
Type
"AUTHOR"
, or"USER"
Methods
executeScript
function getTitle() {return document.title;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: getTitle,
},
() => { ... });3
Promise
Injects a script into a target context. The script will be run at const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['script.js'],
},
() => { ... });3. If the script evaluates to a promise, the browser will wait for the promise to settle and return the resulting value.
Parameters
injection
The details of the script which to inject.
callback
function optional
The function getTitle() {
return document.title;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: getTitle,
},
() => { ... });5 parameter looks like: function getTitle() {
return document.title;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: getTitle,
},
() => { ... });6results
[]
Returns
Promise<[]>
Pending
In Manifest V3 and later, return a function getTitle() {
return document.title;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: getTitle,
},
() => { ... });7 by omitting the function getTitle() {
return document.title;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: getTitle,
},
() => { ... });5 argument. The type inside the function getTitle() {
return document.title;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: getTitle,
},
() => { ... });7 is the same as the 1st argument to function getTitle() {
return document.title;
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
func: getTitle,
},
() => { ... });5.What is the main purpose of serving ad extensions?
These extensions help our ads stand out because, in addition to providing additional information to the user, they take up more space on the Google results page, which increases the possibility that they attract the attention of users and they finally click , which in turn will reduce the cost per click and, in many ...What's one of the main benefits of using ad extensions?
A Google ad extension is an additional piece of information that makes your ad more useful to readers. It provides information like seller reviews, other links from your website, and telephone numbers, thus expanding your advertisement.Which ad extensions can serve?
Answer:- Sitelink, callout, and structured snippets are the ad extensions that can serve automatically.What does adding callout extensions to your Google search ads enable you to do?
Callout extensions are features you can add to your Google search ads to promote your business's unique selling points and the benefits of your products or services.