executeScript error in Vite React extension - javascript

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")

Related

Chrome-Extension | Google Maps cannot be scripted due to an ExtensionsSettings policy

I'm trying to inject a content script into google-maps page using the below code for extracting some info
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
var tab = tabs[0];
chrome.scripting.executeScript({
target: { tabId: tab.id, allFrames: false },
files: ['page.js'],
}).then(() => {
// Doing some stuff
});
});
For example this URL: https://www.google.com/maps/contrib/117085129581545773137/reviews/#40.490946,-75.2538051,8z/data=!3m1!4b1!4m3!8m2!3m1!1e1
always getting this error message: Uncaught (in promise) Error: This page cannot be scripted due to an ExtensionsSettings policy.
manifest.json file
{
"name": "Extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_title": "Click to view a popup",
"default_popup": "index.html"
},
"permissions": [
"activeTab",
"scripting",
"storage",
"unlimitedStorage",
"tabs"
],
"icons": {
"16": "images/icon16-999.png",
"48": "images/icon48-999.png",
"128": "images/icon128-999.png"
}
}
However other sites it's working fine.

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.

How do I disable a chrome extension for certain sites?

I have a chrome extension that uses browser actions, as I want it to run on all sites, bar 1 (matching ".pannus." which is an internal dev site).
I can't work out how to achieve this, I have tried using the manifest and regex in PageStateMatcher.
manifest.json
{
"name": "...",
"description": "...",
"version": "0.0.2",
"permissions": ["contextMenus", "declarativeContent"],
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"],
"css": [ "style.css" ]
}],
"browser_action": {
"default_icon": {
...
}
},
"icons": {
...
},
"manifest_version": 2
}
If I add "exclude_matches": ["*://*.pannus.*"], here, I get an error:
Invalid value for 'content_scripts[0].exclude_matches[0]': Empty path.
I have also tried:
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {
schemes: ['https', 'http'],
urlMatches: '^((?!.pannus.).)*$'
},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
But I get the error:
Could not parse regular expression '^((?!.pannus.).)*$': invalid perl operator: (?!
What is the best way to disable my chrome extension on certain sites? Or, failing that, not inject the extensions content script into the excluded hosts?

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()]
}]);
});
});

Categories

Resources