I am trying to load another page when a button is clicked in my Chrome Extension.
My manifest is like this with the permissions set.
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background" : {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab","tabs", "scripting"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
}
My js to change the page is like this. The first alert shows, but the page doesn't load and the second alert does not show.
function changePage() {
var newUrl = "https://www.bbc.co.uk";
alert("changePage1");
chrome.tabs.update({url: newUrl});
alert("changePage2");
}
After the first alert shows, nothing happens
Related
manifest.json
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"declarative_net_request": {
"rule_resources": [
{
"id": "ruleset_1",
"enabled": true,
"path": "rules_1.json"
}
]
},
"permissions": [
"storage",
"activeTab",
"scripting",
"declarativeNetRequest",
"declarativeNetRequestFeedback"
],
"host_permissions": ["*://example.com/*"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
},
"options_page": "options.html"
}
rules_1.json
[
{
"id": 1,
"priority": 1,
"action": {
"type": "redirect",
"redirect": {
"transform": {
"queryTransform": {
"addOrReplaceParams": [{ "key": "test", "value": "123" }]
}
}
}
},
"condition": {
"urlFilter": "https://example.com",
"resourceTypes": ["main_frame"]
}
}
]
I am playing around with the example extension code from google, I want to add a query param to an existing url, this work but its clunky because:
I have to navigate to the page
Click the extension and hit a button
Go in the url bar and press enter
Then it adds the query param.
[![url updated][1]][1]
Question:
Is it possible to just add the query param as soon as it hits the url instead of having to do the steps above?
[1]: https://i.stack.imgur.com/KH6tY.png
I'm trying to write a Chrome extension where part of the action is changing style of elements to those provided in css file. CSS content is internal for extension and not not downloaded from anywhere. It is exactly in the same location as any other file for extension.
files are following:
manifest.json
{
"name": "Test extenstion",
"description": "Test Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {},
"permissions": ["storage", "activeTab", "scripting"],
"host_permissions": ["*://*/*"],
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
}
background.js:
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: {tabId: tab.id},
files: ['detection-script.js']
});
});
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === 'complete') {
chrome.scripting.insertCSS({
target: { tabId: tabId },
files: ['./elements-highlight.css']
})
.then(() => {
console.log("INJECTED THE FOREGROUND STYLES.");
})
.catch(err => console.log(err));
}
});
In detection-scrpt.js I'm just running script that updates style of each element to style defined in elements-highlight.css. This part is working, I can see styles of element on the website being updated.
What I cannot get is why CSS is not injected? I figured that I had to add host_permissions to remove error:
Extension manifest must request permission to access the respective host.
But beside that I'm not sure what might be missing.
EDIT based on wOxxOm's comment
Dropped only chrome.tabs.onUpdated and updated manifest.json like this
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {},
"permissions": ["storage", "activeTab", "scripting"],
"host_permissions": ["*://*/*"],
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"css": ["elements-highlight.css"]
}]
}
I don't see any change in behavior. Still no change in CSS, beside adding new class to elements.
I have this very simple manifest.json:
{
"manifest_version": 2,
"name": "Sample Name",
"version": "1.0.0",
"description": "This is a sample description",
"short_name": "Short Sample Name",
"permissions": ["tabs", "https://google.com/*", "activeTab", "declarativeContent", "storage"],
"content_scripts": [
{
"matches": ["https://www.google.com/*"],
"js": [
"background.js",
"test.js"
],
"css": ["test.css"]
}
],
"browser_action": {
"default_title": "This is a sample title",
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"32": "icons/icon32.png"
}
}
}
When I go to url https://www.google.com/ and open the content scripts tab in Chrome's dev's tools, I do not see my test.js and test.css scripts there. And, of course, they're not working in the page.
What should I do to add them and make them work?
P.S. Of course, I've created other files, such as window.html, popup.html, background.js, and test.js and test.css too.
The extension was installed successfully, for I see it in the list of my extensions...
I get this error in Firefox:
There was an error during the temporary add-on installation.
Error details ▼
File red_apples.zip does not contain a valid manifest
This is the extension I'm trying to port. Here's the manifest:
{
"manifest_version": 2,
"name": "Red Apples",
"permissions": [
"tabs", "activeTab"
],
"background": {
"persistent": false,
"scripts": [
"background.js"
]
},
"version": "0.0.0.2",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_title": "Red Apples",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"script.js"
]
}
]
}
At the bottom of this tutorial it says there's a 99% chance it works without modification, if it passes the test here. But it passes the test and still doesn't work.
I get the manifest error both for the version packed with Chrome, and for the version just compressed as .zip.
Receiving error below:
Unchecked runtime.lastError while running events.addRules: Host values need to be in lower case.
Manifest.json file includes:
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["*://*/*","activeTab", "declarativeContent", "storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
Pretty new to chrome extnesions. I try adding ":///*" in permissions following a previous example but not having any luck.
chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostEquals: 'www.abc.com' },
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
Do not put any path or query beyond .com, .org, etc.
This helped me resolve this query.