I'm creating my own extension for Google Chrome (for my own use, not to be published). At the moment I have two files:
manifest.json:
{
"manifest_version": 2,
"name": "abcdef",
"description": "abcdef",
"version": "0.1",
"permissions": [
"tabs",
"webNavigation",
"http://www.ztm.waw.pl/*"
],
"background": {
"scripts": ["bg.js"],
"persistent": false
}
}
bg.js:
chrome.webNavigation.onCompleted.addListener(function(o) {
chrome.tabs.executeScript(o.tabId, {
code: "alert('ok');"
});
}, {
url: {
hostContains: 'ztm.waw.pl'
}
});
I want the alert box to appear when I navigate to http://www.ztm.waw.pl, but it does not work. Could someone tell me why?
The url property of chrome.webNavigation.onCompleted accepts an array of chrome.events.UrlFilter (source), so you'll need to change your bg.js to this (note the square and curly brackets in the url property):
chrome.webNavigation.onCompleted.addListener(function(o) {
chrome.tabs.executeScript(o.tabId, {
code: "alert('ok');"
});
}, {
url: [
{hostContains: 'ztm.waw.pl'}
]
});
Related
My extension currently uses the [esc] key to perform an action.
This is done in the content-script, using addEventListener('keydown').
I'd like the user to be able to choose a different shortcut.
I've updated to Manifest V3, and added a new "commands" key, i.e.
{
...
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"content_scripts": [ {
"js": [ "screenshot.js" ],
"matches": [ "http://*/*", "https://*/*" ]
}],
"commands": {
"stop-animations": {
"description": "Stop Animations"
}
}
}
I've updated background.js to use chrome.commands.onCommand, and this works well.
But, how can I get my content-script to determine if the user has set their own shortcut?
Because I should not listen to the 'keydown' event to check if they have pressed the [esc] key.
I've tried using chrome.commands.getAll(), but this method is only available at install time.
A partial option would be to use something like browser.storage to set a simple boolean "custom-command-set" to true whenever onCommand is used, but I cannot think of a way to switch it off again if the user deletes the shortcut command (i.e. they want to go back to using the [esc] key).
At the moment I don't have a toolbar icon (action default_popup), or any other UI, and I'd prefer to not add one just to provide a custom way to set the shortcut.
Content scripts can't call chrome.commands.getAll() directly, so they need to send a message to the service worker. The SW calls chrome.commands.getAll() and sends the result back to the content script.
manifest.json
{
"manifest_version": 3,
"name": "chrome.commands.getAll",
"version": "1.0.0",
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"js": [ "content_script.js" ],
"matches": [ "*://*/*" ]
}
],
"commands": {
"test": {
"description": "Test"
}
},
"permissions": ["commands"]
}
background.js
function commands_on_command(command) {
console.log("on_command", command);
}
function runtime_on_message(message, sender, sendResponse) {
if (message == "get_all_commands") {
chrome.commands.getAll()
.then(commands => {
console.log("background.js", "runtime_on_message", commands);
sendResponse(commands);
});
return true; // https://developer.chrome.com/docs/extensions/mv3/messaging/#simple
}
else {
console.log("background.js", "runtime_on_message", "unknown command");
sendResponse("unknown command");
}
}
chrome.commands.onCommand.addListener(commands_on_command);
chrome.runtime.onMessage.addListener(runtime_on_message);
content_script.js
(async () => {
let response = await chrome.runtime.sendMessage("get_all_commands");
console.log("content_script.js", response);
})();
I have written a simple extension just to learn how it works.
Manifest V3:
{ "name": "Sample",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_name": "Sample",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"permissions": ["tabs", "storage", "activeTab", "clipboardRead", "scripting"],
"host_permissions": ["http://*/", "file://*/*", "https://*/", "*://*/*"]
}
popup.html:
.....
.....
<button id='getInfo' >GET</button>
.....
.....
popup.js:
....
document.getElementById("getInfo").addEventListener("click", function() {
chrome.tabs.query(
{active: true, currentWindow: true},
(tabs) => {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
file: ['func.js'],
});
});
}
func.js:
alert("extension sample")
When i press the button 'GET' i receive an error in extension manager page.
The error says: "Error handling response: TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter 'injection': Unexpected property: 'file'."
I have tried with function instead of the file and it works.
How i can fix this error? Thank you.
chrome.scripting.executeScript does not have file property.
You should use files property.
Search for "executeScript" in the official Google documentation below to see the sample.
https://developer.chrome.com/docs/extensions/reference/scripting/
I was trying to make an extension that sets the proxy on startup, but I always get the error "TypeError: Invalid invocation", I have tried all the solutions i found in google, and also here in stackoverflow.
Here's my code.
background.js
chrome.runtime.onStartup.addListener(() => {
// config, i also tried using just 'singleProxy'
const value = {
mode: 'fixed_servers',
rules: {
proxyForHttp: {
scheme: 'http',
host: 'some.proxyhost.com',
port: 44444,
},
proxyForHttps: {
scheme: 'http',
host: 'some.proxyhost.com',
port: 44444,
},
proxyForFtp: {
scheme: 'http',
host: 'some.proxyhost.com',
port: 44444,
},
bypassList: [],
},
};
chrome.proxy.settings.set({
value,
function() {
},
});
});
and also I tried adding that code on popup. and activating it by triggering a button and still no luck. I also tried using another proxy extension and it works. Also tried it in manifest v2, but still I get the same error.
manifest.json
{
"manifest_version": 3,
"name": "Proxy Setter Extension",
"version": "1.0.0",
"background": { "service_worker": "background.bundle.js" },
"permissions": ["proxy", "scripting", "tabs"],
"action": {
"default_popup": "popup.html",
"default_icon": "icon-34.png"
},
"icons": {
"128": "icon-128.png"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*", "<all_urls>"],
"js": ["contentScript.bundle.js"],
"css": ["content.styles.css"]
}
],
"devtools_page": "devtools.html",
"web_accessible_resources": [
{
"resources": ["content.styles.css", "icon-128.png", "icon-34.png"],
"matches": []
}
]
}
I have a simple app that I'm using to learn Chrome Extensions.
I cannot get break points to work in mainscript.js file in the debugger.
I couldn't see mainscript.js under Pages or Content Scripts.
I can see it when I load Filesystem and apply breakpoints but they are not breaking.
The alert is being displayed.
How do I set break points that work in mainscript.js?
Manifest:
{
"name": "Enable/Disable",
"version": "1.0",
"manifest_version": 2,
"description": "Enables/Disables",
"permissions":
[
"http://xxx.xxx.xxx.xxx/*",
"activeTab"
],
"browser_action":
{
"default_icon":
{
"16": "images/Icon_ENABLED.png"
}
},
"background":
{
"scripts": ["background.js"]
}
}
background.js:
chrome.browserAction.onClicked.addListener
(
function(tab)
{
chrome.tabs.executeScript(tab.id, {file: "mainscript.js"});
}
);
mainscript.js
alert('Mainscript');
I've been trying to develop a chrome extension that creates notifications after certain periods of time. I've been using both chrome.alarms and chrome.notifications to accomplish this, but I cannot get notifications to appear, even when creating them from the console. I also don't get any errors from runtime.lastError in the callback. I do know for certain that the alarm listener and callback are being executed.
manifest.json
{
"manifest_version": 2,
"name": "notifications",
"version": "0.0",
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": ["notifications.js"],
"persistent": false
},
"permissions": [
"alarms",
"storage",
"notifications"
],
"web_accessible_resources": [
"mascot48.png"
]
}
notifications.js
function resetTimer(id, minutes) {
chrome.alarms.create(id,{delayInMinutes: minutes});
}
chrome.alarms.onAlarm.addListener((alarm) => {
console.log('alarm!');
chrome.notifications.create('reminder', {
type: 'basic',
iconUrl: 'mascot48.png',
title: 'Dont forget!',
message: 'You have things to do'
}, function(notificationId) {
console.log(chrome.runtime.lastError);
});
});
Is there anything clear that I'm getting wrong?
EDIT: For clarity, notifications.js is my events page, the popup page is the one that runs the code to start the alarms.