I am following how to make chrome extension getting started that is posted in chrome official site https://developer.chrome.com/docs/extensions/mv3/getstarted/
And I copied and pasted all code and run on the same way. But in my case, When I run chrome.scripting.executeScript, It causes "Uncaught (in promise) Error: Cannot access a chrome:// URL" error.
I don't know what is problem. Here is my code that had been copied from the link above.
manifest.json
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "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"
}
}
background.js
let color = '#3aa757';
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ color });
console.log(`default color: ${color}`);
});
popoup.js
// Initialize button with user's preferred color
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', ({ color }) => {
changeColor.style.backgroundColor = color;
});
// When the button is clicked, inject setPageBackgroundColor into current page
changeColor.addEventListener('click', async () => {
console.log('clicked');
console.log(chrome.tabs);
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
console.log(tab);
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setPageBackgroundColor,
});
});
// The body of this function will be executed as a content script inside the
// current page
function setPageBackgroundColor() {
chrome.storage.sync.get('color', ({ color }) => {
document.body.style.backgroundColor = color;
});
}
popup.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="button.css" />
</head>
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
Do you have an idea??
When you try to trigger the event make sure that you are not in chrome://extensions/ or something similar.
You can check the URL and avoid inject the script for "chrome://":
// skip urls like "chrome://" to avoid extension error
if (tab.url?.startsWith("chrome://")) return undefined;
chrome.scripting.executeScript({
//...
I also do this in the background.js because I'm injecting the script there:
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
// skip urls like "chrome://" to avoid extension error
if (tab.url?.startsWith("chrome://")) return undefined;
if (tab.active && changeInfo.status === "complete") {
chrome.scripting.executeScript({
//...
Note. To have access to tab.url you need "tabs" in manifest (V3) "permissions".
Related
Can you tell me why the following code is not working. Here is my code :
Popup.js (not a backgorund script) :
chrome.tabs.create({url: url}, function(tab) {
chrome.tabs.executeScript(tab.id, {file: 'connect.js', allFrames:true}, function() {
chrome.tabs.sendMessage(tab.id, 'whatever value; String, object, whatever');
});
});
content script :
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
console.log(message);
// Handle message.
// In this example, message === 'whatever value; String, object, whatever'
});
And my manifest :
{
"name": "AN App",
"version": "1.0",
"description": "To connect",
"permissions": [
"storage",
"activeTab",
"tabs",
"https://*/*"],
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts": [{
"matches": ["https://*/*"],
"js": ["connect.js"]
}],
/*
"background": {
"scripts": ["background.js"]
},*/
"manifest_version": 2
}
I don't understand, the console debug in the tab do not display anything...
I also try from the popup to the background and then from the background to the tab but nothing happen neither (I'm quite new at chrome extension so I hope u can help me)
Thanks,
Regards
Martin
I found the solution. When I call chrome.tabs.create from the JS inside the popup it closes the code running in the popup and the message is never sent.
So instead of calling the chrome.tabs.create inside the JS linked to the popup, I just send a message to the background script, the background script call chrome.tabs.create (like this it runs in background and the code do not stop from executing).
And then the message function works correctly like chrome doc says.
Martin
I m working on extension that changes the background color of all divs on page to red but the control doesnot pass to the content script. Using the developers tools i m able to set breakpoints in background.js and popup.js but not in content.js so i used console.log but it is not executing plz help
popup.html
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<button id="change-btn">Change color of Divs</button>
</body>
</html>
popup.js
window.onload=init;
function init(){
var btn=document.getElementById("change-btn");
btn.onclick = function(){
chrome.runtime.sendMessage({type:"color-div" });
}
};
background.js
chrome.runtime.onMessage.addListener(function(request, sender, response){
if(request.type==="color-div"){
colordiv();
}
});
function colordiv(){
chrome.tabs.query({ active:true, currentWindow:true} , function(tab){
chrome.tabs.sendMessage( tab[0].id, {type: "colors-div", color: "#F00"});
});
};
content.js
chrome.runtime.onMessage.addListener(function(request, sender, response){
if(request.type==="colors-div"){
var divs= document.querySelectorAll("div");
if(divs.length===0)
alert("There r no divs on this page ");
else{
console.log("Before for loop");
for(var i=0; i<divs.length; i++)
{
divs[i].style.backgroundColor=request.color;
}
console.log("After for loop");
}
}
});
manifest.json
{
"name": "BrowserExtension",
"version": "0.0.1",
"manifest_version": 2,
"description" : "Description ...",
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}],
"browser_action": {
"default_icon": "icon.png",
"default_title": "That's the tool tip",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions":["tabs"]
}
This code works for me and the console.log statements show up in the Javascript console for the page when I open developer tools. Make sure that you refresh the tab you are targeting so that the content script is injected and be aware that this script will not be injected to local HTML documents because "file:///*" is not one of the matching rules specified for the content script.
I am new to Google Chrome Extensions. I have created a button in my extension. With that button I want to redirect the user to another site (like "www.example.com").
I have the following code which I wrote for the redirection, but it doesn't work.
Related question.
manifest.json
{
"name": "Popup ",
"manifest_version": 2,
"version": "0.1",
"description": "Run process on page activated by click in extension popup",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
popup.html
<html>
<head>
<script src="popup.js"></script>
<style type="text/css" media="screen">
body { min-width:250px; text-align: center; }
#click-me { font-size: 15px; }
</style>
</head>
<body>
<button id='click-me'>Click Me!</button>
</body>
</html>
background.js
chrome.extension.onRequest.addListener(function(request, sender) {
chrome.tabs.update(sender.tab.id, {url: request.redirect});
});
popup.js
function clickHandler(e) {
chrome.extension.sendRequest({redirect: "https://www.google.co.in"});
alert("url");
this.close();
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('click-me').addEventListener('click', clickHandler);
})
Do you have any idea why it doesn't work?
If you use background pages, then you need to declare the background script (background.js in your case) in the manifest file:
"background": {
"scripts": [ "background.js" ]
},
Your example will not work though, because sender.tab is only defined if the request came from a tab or content script, not from the popup.
In your example, there is no need for a background page at all, you can just use the chrome.tabs API directly from the popup page:
function clickHandler(e) {
chrome.tabs.update({url: "https://example.com"});
window.close(); // Note: window.close(), not this.close()
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('click-me').addEventListener('click', clickHandler);
});
I create one chrome extension that I want append one javascript file in source code current page. I write this code but doesn't work.
Indeed I can append one tag like javascript in source code current page but doesn't work and I take this ERRORS:
Denying load of chrome-extension://lmainnigamjlkokflgjdkjdjbphifefb/remove2.js?_=1372832784584. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
GET chrome-extension://invalid/
Failed to load resource
this is my codes:
manifest.json
{
"manifest_version" : 2,
"name" : "Get URL",
"description" : "This is extension test-2",
"version" : "1.0",
"permissions" : ["tabs"],
"browser_action" : {
"default_title": "This is extension test-2",
"default_icon": "icon.png",
"default_popup" : "popup.html"
},
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*" ],
"js": ["jquery.js", "content.js"]
}
],
"icons" : {
"19": "icon.png"
}
}
content.js
insertTooltip();
function insertTooltip () {
var ic = chrome.extension.getURL('remove2.js');
console.log(ic);
var tooltip = '<script type="text/javascript" src="'+ic+'"></script>';
console.log(tooltip);
$('body').append(tooltip);
};
popup.html
<html>
<head>
<script src="get.js"></script>
<script src="content.js"></script>
</head>
<body>
<div id="show"></div>
</body>
</html>
get.js
var currentURL;
chrome.tabs.getSelected(null, function(tab) { //<-- "tab" has all the information
currentURL = tab.url //<-- return the url.
//console.log(currentURL)
if(currentURL)
{
//alert(currentURL);
var div = document.getElementById('show');
div.innerHTML = currentURL;
}
});
please guide me about it......
You need to add your remove2.js script to your manifest.
{
...
"web_accessible_resources": [
"remove2.js"
],
...
}
More info here.
I'm trying to implement my own chrome extension on which, on a certain event, create a browser notification and fills the popup with data calculated in background.js
Here is my manifest.json file:
{
"name": "Dummy name",
"description": "Description",
"manifest_version": 2,
"version": "1.1.3",
"icons": {
"16": "icon_16.png",
"48": "icon_48.png",
"128": "icon_128.png",
"256": "icon_256.png"
},
"browser_action": {
"default_icon": "icon_48.png",
"default_title": "Test",
"default_popup": "popup.html"
},
"permissions": ["background","webRequest","webRequestBlocking","webNavigation","tabs","notifications"],
"background": {
"scripts":["jquery-1.8.1.min.js","classy.js","background.js"]
}
}
My call to sendMessage in background.js
show : function(result) {
var that = this;
chrome.extension.sendMessage({greeting: "hello"}, function(response) {
console.log(response);
});
if(window.webkitNotifications) {
var notification = webkitNotifications.createHTMLNotification('notification.html');
notification.show();
setTimeout(function(){
notification.cancel();
}, '7000');
}
}
My message listener in popup.js (from chrome extension samples)
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
The only error I get is a
Port error: Could not establish connection. Receiving end does not
exist.
Thank you for your help!
Popup doesn't have tab id so you will get the error.
You can use chrome.runtime.sendMessage and chrome.runtime.onMessage.addListener in that case.
So in background.js
chrome.runtime.sendMessage({
msg: "something_completed",
data: {
subject: "Loading",
content: "Just completed!"
}
});
And in popup.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.msg === "something_completed") {
// To do something
console.log(request.data.subject)
console.log(request.data.content)
}
}
);
I hope it would be helpful to you.
To solve this you need to first send a handshake message to background.js and then send the actual data from background.js to popup.js
For Example: In my case what i did was
popup.js
chrome.runtime.sendMessage({data:"Handshake"},function(response){
});
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
str = JSON.stringify(message.data);
});
background.js
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
//alert(message.data);
chrome.runtime.sendMessage({data:datax},function(response){
});
});
What iam trying to do is that as soon as we click on icon the handshake message is sent to the background.js and when it recieves it we can then send the variable or any data whick we wanted to send on popup.js to render it on popup.html.
These are the two simplest ways I've found to send data from background.js to popup.js:
1) Using storage
Save values into storage and once popup gets opened, it gets the values from storage and displays them in the popup.
background.js
chrome.storage.sync.set({ 'dataValue1': 'Some data 1.' });
chrome.storage.sync.set({ 'dataValue2': 'Some data 2.' });
popup.js
function updatePopup() {
chrome.storage.sync.get(['dataValue1', 'dataValue2'], function (data) {
document.getElementById("popupElement1").innerText = data.dataValue1;
document.getElementById("popupElement2").innerText = data.dataValue2;
});
}
document.addEventListener('DOMContentLoaded', updatePopup);
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<p id="popupElement1"></p>
<p id="popupElement2"></p>
</body>
</html>
manifest.json
{
"name": "Background2popup",
"version": "1.0",
"manifest_version": 2,
"description": "This is a demo",
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": [
"background.js"
]
},
"permissions": [
"<all_urls>",
"storage",
"tabs"
]
}
2) Using chrome.runtime.sendMessage()
Once popup opens, you send a message from popup to background to establish the connection/handshake (otherwise, you would get a 'Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.' if you try to send a message from background to popup and popup isn't open). Once with the connection established, you use sendResponse from background to send the data you wanted to send to popup in the first place.
background.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.method == "getStatus") {
console.log(request.data)
sendResponse({ method: "peepee", data: "poopoo" })
}
});
popup.js
chrome.runtime.sendMessage({ method: "getStatus", data: "xxx" }, function (res) {
document.getElementById("popupElement1").innerText = res.method;
document.getElementById("popupElement2").innerText = res.data;
return true;
});
popup.html & manifest.json are the same as in the first example
localStorage solution
Because the popup does not have a persistent state, you may want to use localStorage to store the popup state and preload it when popup opens and the storage event to keep track of changes to the state while the popup is open.
Background:
localStorage.setItem('popupData', JSON.stringify({ tabReady: true }));
Popup:
// Load the state from localStorage when popup opens
let popupData = JSON.parse(localStorage.getItem('popupData'));
// Keep track of changes to the popup state while the popup is open
window.addEventListener('storage', (e) => {
if (e.key === 'popupData') {
popupData = JSON.parse(e.newValue);
console.log(popupData.tabReady);
}
});
Use runtime.sendMessage to send messages to background script, and tabs.sendMessage from background to content script.
Please note that you need to specify tab id:
chrome.tabs.query({ active: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, { greeting: 'hello' }, (response) => {
console.log(response);
});
});
You can find full example and documentation here: https://developer.chrome.com/extensions/messaging#simple