Develop Reference

executeScript error in Vite React extension

I am having an issue with the executeScript function with using Vite React chrome extension tools with CRXJS
I am receiving the error message "Uncaught (in promise) Error: could not get url" when trying to use it.
The initial injection of the content.tsx file from the manifest.json is working fine, but the error is occurring when I call chrome.scripting.executeScript.
my manifest.json
{
"manifest_version": 3,
"name": "CRXJS React Vite Example",
"version": "0.0.1",
"action": { "default_popup": "index.html" },
"content_scripts": [
{
"js": ["src/content.tsx"],
"matches": ["*://*.github.com/*"]
}
],
"background": { "service_worker": "src/background.ts"},
"permissions": ["webRequest", "webNavigation", "tabs", "activeTab", "scripting"],
"host_permissions": ["<all_urls>"],
"web_accessible_resources": [
{
"resources": ["src/assets/*"],
"matches": ["https://*/*"]
}
]
}
Here is my use of chrome.scripting in background.ts:
const inject = (tabId) => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
if (tabs[0].url?.includes("some/search/string")) {
const jsFiles = chrome.runtime.getManifest().content_scripts[0].js;
chrome.scripting.executeScript({
target: { tabId },
files: jsFiles,
})
.then(() => {
console.log("injected");
});
}
});
};
I also tried with files: ["content.tsx"], or files: ["src/content.tsx"], but I received the error: "Uncaught (in promise) Error: Could not load file: 'src/content.tsx'" on chrome dev tools
The only way to not have Could not load file error is to put the bundled file name taken from chrome.runtime.getManifest().content_scripts[0].js ("src/content.tsx-loader.js")

Chrome Extension 'Could not load background script 'background.js'. Could not load manifest' using React

I'm trying to make my chrome extension open a new tab upon installation using the chrome.tabs API but I get the error 'Could not load background script 'background.js'. Could not load manifest.'
This is my manifest.json:
{
"short_name": "App",
"name": "App",
"version": "1.0.0",
"manifest_version": 2,
"icons": {
"16": "favicon.ico",
"48": "logo192.png",
"128": "logo512.png"
},
"permissions": ["tabs"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "App",
"default_popup": "index.html"
}
}
and my background.js:
chrome.runtime.onInstalled.addListener(function() {
alert('Thanks for installing!');
chrome.tabs.create({
url: 'https://google.com',
active: true
});
return false;
});
If anyone could help, that'd be great:)

Manipulate the main page using popup.js Chrome Extension

I am trying to create a chrome extension to turn a page red
This is my manifest file:
{
"name": "Page Redder",
"description": "Make the current page red",
"version": "2.0",
"icons":{"128":"icon_128.png"},
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Make this page red",
"default_popup":"popup.html"
},
"manifest_version": 2
}
And here is my background.js file:
function mainFunction(){
document.body.style.backgroundColor="red";
}
Here is my popup.js file:
document.getElementById("btnDownloadListings").addEventListener("click", function() {
document.body.style.backgroundColor="red";
chrome.runtime.getBackgroundPage(function(backgroundPage) {
backgroundPage.mainFunction();
});
}, false);
When I click the button the popup.html or the popup tab turns red but the main page does not.

Can't execute script into new tab in chrome extention API

I'm trying to run window.location.href= $newURL after opening a new tab by using executeScript.
Error:
Unchecked runtime.lastError: Cannot access contents of url "https://www.google.com/_/chrome/newtab?ie=UTF-8". Extension manifest must request permission to access this host.
What permission still needed to be added to this manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": ["activeTab", "tabs", "declarativeContent", "*://*/*", "storage"],
"page_action": {
"default_popup": "popup.html"
}
}
and the running code for the new tab in background.js
chrome.runtime.onInstalled.addListener(function() {
chrome.tabs.onCreated.addListener(function( tab ){
tab.url = "https://mahmoudzakaria90.github.io/HelloZeka/public/"
chrome.tabs.executeScript({
file: './inject.js'
})
})
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher()
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});

Chrome Extension only works on "developer.chrome.com"

This is my first chrome extension so please forgive me for asking such a novice question. My extension currently only works on 'developer.chrome.com' (icon has color) but I would like it to work on amazon.com (icon is gray). From googling, I didn't see anyone else come up with the same problem so I'm guessing it must be a mistake on my end. Here is my manifest.json:
{
"name": "Reviews Extension",
"version": "1.0",
"description": "Get additional reviews from third party retailers",
"permissions": [
"https://api.walmartlabs.com/",
"https://www.amazon.com/",
"activeTab",
"declarativeContent",
"storage"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"options_page": "options.html",
"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
}
UPDATE:
When I fiddled with background.js on the pageUrl: {hostEquals: 'developer.chrome.com'}, I found when I delete the URL, it no longer works on developer.chrome.com. But when I changed it to https://www.amazon.com/ in place of developer.chrome.com, it didn't work on amazon's main page either.
'use strict';
chrome.runtime.onInstalled.addListener(function () {
chrome.storage.sync.set({ color: '#3aa757' }, function () {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostEquals: 'developer.chrome.com' },
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
UPDATE 2:
Got it working by change the pageURL in background.js. It had to be formatted in a very specific way: www.amazon.com, NOT https://www.amazon.com, amazon.com, or any other variations. I am still unable to add multiple websites by adding commas in between, any ideas there?

Try adding more conditions and using hostContains or urlContains instead of hostEquals.
For example:
chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: '.developer.chrome.com' },
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: '.amazon.com' },
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});

Try adding '*' to expand which pages of Amazon your extension will work on.
For example:
"https://*.amazon.com/*"
https://developer.chrome.com/apps/match_patterns