I'm new to extension creation and have a problem, which I've already been able to find various ways to solve, but which are all different from mine and/or fixed with manifest V2 instead of V3 which I need.
Also, some fixes found work on their end, but not on mine, so I really don't understand the problem.
Here is my problem:
I want to make a chrome extension to take screenshots of my browser and apps
I found an online tutorial that seemed correct to me (by the way, the only tutorial that uses AND the screenshots AND the V3 manifest, so perfect!)
Following the tutorial, I got the following error: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
I looked for various ways, but nothing worked, I ended up downloading the git code of the tutorial, but it does not change anything, the error is still present
From what I understand, the error is in the following line:
chrome.action.onClicked.addListener(function (tab) {
chrome.desktopCapture.chooseDesktopMedia(
["screen", "window", "tab"],
tab,
(streamId) => {
if (streamId && streamId.length) {
setTimeout(() => {
chrome.tabs.sendMessage(
tab.id,
{ name: "stream", streamId },
(response) => console.log("received user data", response) // error is here, response is undefined
);
}, 200);
}
}
);
});
I get undefined instead of the response, and I think it's from there that it's a problem, because it never goes on and therefore never activates the onMessage function, nor the content_script
Here is the full background.js code :
chrome.action.onClicked.addListener(function (tab) {
chrome.desktopCapture.chooseDesktopMedia(
["screen", "window", "tab"],
tab,
(streamId) => {
if (streamId && streamId.length) {
setTimeout(() => {
chrome.tabs.sendMessage(
tab.id,
{ name: "stream", streamId },
(response) => console.log("received user data", response)
);
}, 200);
}
}
);
});
chrome.runtime.onMessage.addListener((message, sender, senderResponse) => {
if (message.name === "download" && message.url) {
chrome.downloads.download(
{
filename: "screenshot.png",
url: message.url,
},
(downloadId) => {
senderResponse({ success: true });
}
);
return true;
}
});
Content_script
chrome.runtime.onMessage.addListener((message, sender, senderResponse) => {
if (message.name === 'stream' && message.streamId) {
let track, canvas
navigator.mediaDevices.getUserMedia({
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: message.streamId
},
}
}).then((stream) => {
track = stream.getVideoTracks()[0]
const imageCapture = new ImageCapture(track)
return imageCapture.grabFrame()
}).then((bitmap) => {
track.stop()
canvas = document.createElement('canvas');
canvas.width = bitmap.width; //if not set, the width will default to 200px
canvas.height = bitmap.height;//if not set, the height will default to 200px
let context = canvas.getContext('2d');
context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height)
return canvas.toDataURL();
}).then((url) => {
chrome.runtime.sendMessage({name: 'download', url}, (response) => {
if (response.success) {
alert("Screenshot saved");
} else {
alert("Could not save screenshot")
}
canvas.remove()
senderResponse({success: true})
})
}).catch((err) => {
alert("Could not take screenshot")
senderResponse({success: false, message: err})
})
return true;
}
})
manifest v3
{
"name": "Screenshots",
"version": "0.0.1",
"description": "Take screenshots",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["desktopCapture", "downloads", "tabs", "nativeMessaging"],
"action": {
"default_title": "Take a Screenshot"
},
"icons": {
"16": "/assets/icon-16.png",
"32": "/assets/icon-32.png",
"48": "/assets/icon-48.png",
"128": "/assets/icon-128.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}
]
}
I tried several things after various research like
Disable my extensions (which makes no sense, but you never know)
Add a timeout for the response, I tried up to 20 seconds delay, but without success
Added breakpoints everywhere to see if it crosses the line or not
Here is an implementation without service worker and content scripts.
manifest.json
{
"name": "desktopCapture",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"desktopCapture",
"tabs",
"downloads"
],
"action": {
"default_popup": "popup.html"
}
}
popup.html
<html>
<body>
<script src="popup.js"></script>
</body>
</html>
popup.js
const createDate = {
url: "desktopCaptuer.html",
type: "popup",
width: 800,
height: 600
};
chrome.windows.create(createDate);
desktopCaptuer.html
<html>
<body>
<input type="button" id="captuer" value="Captuer">
<script src="desktopCaptuer.js"></script>
</body>
</html>
desktopCaptuer.js
chrome.windows.getCurrent({}, w => {
chrome.windows.update(w.id, { focused: true }, () => {
document.getElementById("captuer").onclick = () => {
const sources = ["screen", "window", "tab"];
chrome.tabs.getCurrent((tab) => {
chrome.desktopCapture.chooseDesktopMedia(sources, tab, (streamId) => {
let track, canvas;
navigator.mediaDevices.getUserMedia({
video: {
mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: streamId
},
}
}).then((stream) => {
track = stream.getVideoTracks()[0];
const imageCapture = new ImageCapture(track);
return imageCapture.grabFrame();
}).then((bitmap) => {
track.stop();
canvas = document.createElement("canvas");
canvas.width = bitmap.width;
canvas.height = bitmap.height;
let context = canvas.getContext("2d");
context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);
return canvas.toDataURL();
}).then((url) => {
chrome.downloads.download({
filename: "screenshot.png",
url: url,
}, () => {
canvas.remove();
});
}).catch((err) => {
console.log(err);
alert("Could not take screenshot");
})
});
});
}
});
});
Works for me, using Chromium 107.0.5304.121 (Official. Build) Arch Linux (64-Bit).
Go to https://stackoverflow.com/
Click on the extension icon.
A new window opens, with the text "Select what you want to share. Screenshots wants to share the contents of your screen with stackoverflow.com"
Click on one of the tabs: Entire Screen, Window, Chromium Tab
Click on a screenshot preview or tab title
Click "Share"
The browser displays an alert with the text "Screenshot saved", and a file named "Screenshot.png" is created in the default downloads directory.
So, #Norio Yamamoto 's solution suits me perfectly, because I then need to make a popup to give a name and do other processing on my screen, so thanks to your help, I'm already moving on by starting to understand it HTML popups on extensions! Thanks !
For the problem itself, I was able to "fix" it in the end by reinstalling chrome, and it works as #Thomas Muller tells me... not sure why, maybe I had to break something with many tests, so the app was already working
But I noticed a problem on the version of the tutorial compared to the one with popup, the tutorial version does not work on: non-reload pages (thanks #wOxxOm for the tip by the way), nor on chrome home pages, nor on the extension page, so I really prefer the popup version, but I need to dig more to improve that
Thanks again !
I have this function that runs when a certain button in my popup.html is clicked
popup.js
async function execute () {
console.log("Executing...")
const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
let res;
try {
res = await chrome.scripting.executeScript({
target: {tabId: tab.id},
files: ["/src/MainScript.js"],
}, (a) => {
console.log("Done callback?", a)
});
} catch (e) {
return;
}
console.log("Result of script?", res)
}
"Done callback?" and "Result of script?" are printed inmediately after I run execute() so it's not waiting for it's execution to finish but to load the file, I think 🤔
I want to execute the MainScript.js file and wait for it's execution to finish. That file looks something like this:
MainScript.js
(async function () {
function Main () {
this.run = async function () {
// ...
}
}
const main = new Main();
await main.run();
})()
What I want to achieve is, when MainScript.js finishes it's execution I want to change some styling and elements in my popup.html.
I was wondering how to actually wait for the execution to finish or instead send a message from MainScript.js to my popup.js somehow or any alternative way, I'm opened to everything
EDIT
I tried the approach of messaging since I cannot wait for the execution to finish in manifest v3 (ty wOxxOm):
At the end of MainScript.js I placed this
const main = new Main();
await main.run();
chrome.runtime.sendMessage(myExtensionId, {type: 'processDone', value: true});
And then in background.js I listen for that message
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
console.log("Hello background", request);
// Set loading to false in localStorage...
}
);
And the listener is never triggered BUT when I manually type the sendMessage through the console it works as expected, the service worker console prints "Hello background"
How can I send a message from the Content Script (MainScript.js) to the service worker background.js??
Just in case, this is my manifest.json
{
"name": "Extension name",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": "/images/favicon-32x32.png",
"default_title": "Title"
},
"permissions": [
"activeTab",
"tabs",
"webNavigation",
"scripting",
"storage"
],
"externally_connectable": {
"ids": [
"*"
],
"matches": [
"https://*.google.com/*"
]
},
"host_permissions": [
"http://*/*", "https://*/*"
]
}
I have been trying to make a chrome extension that gives the meaning of the selected text using urban dictionary API. I have tried different approaches but unable to connect all the files for proper execution.
manifest.json
{
"manifest_version": 2,
"name": "Urban Dictionary",
"version": "0.1",
"description": "Dictionary based on Urban Dict.",
"browser_action": {
"default_popup": "popup.html"
},
"icons": {
"16": "images/images.jpg",
"32": "images/images.jpg",
"48": "images/images.jpg",
"128":"images/images.jpg"
},
"permissions": [
"tabs",
"activeTab"
]
}
popup.html
<!doctype html>
<html>
<head>
<title>meaning</title>
</head>
<body>
<h1>meaning</h1>
<button id="test"></button>
<script src="popup.js"></script>
<script src="getword.js"></script>
</body>
</html>
popup.js
chrome.tabs.executeScript(null, {file: "getword.js"},(results)=>{ console.log(results); } );
getword.js
var something;
var term = window.getSelection().toString()
fetch("https://mashape-community-urban-dictionary.p.rapidapi.com/define?term="+term, {
"method": "GET",
"headers": {
"x-rapidapi-key": "My_API_KEY",
"x-rapidapi-host": "mashape-community-urban-dictionary.p.rapidapi.com"
}
})
.then(response => response.json())
.then(result => {
console.log(result)
something=result.list[0].definition
}
)
.catch(err => {
console.error(err);
});
console.log(something)
document.getElementById("test").innerHTML = something;
When trying to manipulate HTML using getword.js. The result comes out to be undefined.
I would be highly obliged if anyone can help me in any way to refactor this code.
In chrome extensions you always define your background scripts in manifest file otherwise it wont work.
like this :
"background": {
"scripts": [
"back.js"
],
"persistent": true
},
Secondly Popup.js needs to be included in your pop.html like we normally do <script src="popup.js"></script>
and lastly there is another type of script that is called content script which also needs to be included in manifest to work at all.
like this:
"content_scripts": [
{
"js": ["jquery-3.5.0.min.js","content.js"]
}
],
According to your need you should probably study content scripts i think.
There are several problems:
Injected code can't make cross-origin network requests.
getword.js's purpose is to be injected as a content script so it runs in the web page and thus shouldn't be listed in popup.html as the popup is a separate extension page in a separate window not related to the web page.
The solution is straightforward:
get the selected text from the web page,
transfer it to the popup script,
make the network request and show the result.
manifest.json (MV2) should list the API site in permissions:
"manifest_version": 2,
"permissions": [
"activeTab",
"https://mashape-community-urban-dictionary.p.rapidapi.com/"
]
popup.html: remove getword.js from html and delete getword.js file.
popup.js:
const API_HOST = 'mashape-community-urban-dictionary.p.rapidapi.com';
const API_OPTS = {
headers: {
'x-rapidapi-key': 'My_API_KEY',
'x-rapidapi-host': API_HOST,
},
};
chrome.tabs.executeScript({
code: 'getSelection().toString()',
}, async pageData => {
try {
const term = pageData[0].trim();
if (!term) throw new Error('No selection!');
const apiUrl = `https://${API_HOST}/define?term=${encodeURIComponent(term)}`;
const apiRes = await (await fetch(apiUrl, API_OPTS)).json();
const def = apiRes.list[0].definition;
document.getElementById('test').textContent = def;
} catch (e) {
document.getElementById('test').textContent =
chrome.runtime.lastError ? 'Cannot access this page' : e.message;
}
});
I'm trying to send some data from runtime (background.js) back to my content script. For some reason, it doesn't work for me. Here's my code:
manifest.json
"permissions": [
"activeTab",
"tabs",
"*://*.mysite.com/*"
],
"background": {
"scripts": ["background.js"],
"persistent": true
},
"content_scripts":[
{
"matches": ["*://*.mysite.com/*"],
"js": ["script.js"]
}
],
background.js
function sendToActiveTab(type, message) {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, { type: type, message: message });
})
}
chrome.runtime.onMessage.addListener(
(request, sender, sendResponse) => {
if (request) {
//do some stuff here
sendToActiveTab('type', 'message');
}
}
)
script.js
document.write('hello');
var params = new URLSearchParams(window.location.search);
chrome.runtime.onMessage.addListener(
(request, sender, sendResponse) => {
if (request) {
//do some stuff here
}
}
)
if (params.get('someParam')) {
chrome.runtime.sendMessage(
{
example: 'data'
}
)
} else {
//do some stuff here
}
Here's what I tried:
return true in background.js addListener & scripts.js addListener
return Promise in background.js addListener & scripts.js addListener
I checked - chrome.tabs.query returns the right tab and everything looks good there (although status of this tab is 'loading')
I've looked through many links online and still can't find a solution that works for me. I'd appreciate any help!
I have a Chrome extension that scrapes some values from a webpage based on some query selectors that are provided via an API call.
Relevant portion of manifest.json:
"background": {
"scripts": ["js/background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/jquery.min.js"]
}
],
"permissions": [
"<all_urls>",
"storage",
"activeTab"
]
}
js/background.js:
The idea here is that if a user has entered an atsmap value on their options page, we should perform an API call.
chrome.storage.sync.get(['atsmap'], function(result) {
if (result.atsmap) {
var url = "https://myurl.com/AtsMapping.aspx?AtsCode=" +
encodeURIComponent(result.atsmap)
fetch(url).then(r => r.text()).then(text => {
console.log(text);
response = JSON.stringify(text);
chrome.storage.sync.set({"fieldmapping": response}, function() {
console.log('Fieldmapping is set to ' + response);
});
})
}
return true;
});
This portion appears to be working properly, here is the console from the background page:
In popup.js (which is included at the bottom of popup.html), I call an inject.js script after the DOM is loaded:
// DOM Ready
$(() => {
'use strict';
chrome.tabs.executeScript({file: 'js/inject.js'}, () => {
// We don't need to inject code everwhere
// for example on chrome:// URIs so we just
// catch the error and log it as a warning.
if (chrome.runtime.lastError) {
console.warn(chrome.runtime.lastError.message);
}
});
// injected code will send an event with the parsed data
chrome.runtime.onMessage.addListener(handleInjectResults);
});
And finally, in js/inject.js, I get the value of fieldmapping from storage and attempt to use it:
(function () {
'use strict';
let fieldmap;
let message;
console.log("test");
chrome.storage.sync.get(['atsmap'], function(result) {
if (result.atsmap) {
chrome.storage.sync.get(['fieldmapping'], function(result) {
console.log('Value currently is ' + result.fieldmapping);
fieldmap = JSON.parse(result.fieldmapping);
console.log(fieldmap);
// <key> : { // ID of input on popup.js
// selector: <selector> // DOM selector of value in page
// value: <value> // value to use in popup.js
// }
if(fieldmap.AtsMapping[4].atsMapNotes == 'John Smith (2)') {
message = {
txtLName: {
selector: fieldmap.AtsMapping[6].lastName,
value: null
},
When I go to a demo page that I've setup for the scraping, then click my extension icon, rather than scraping the page for the form values, I get the following in the console:
I don't understand how, on inject.js line 32, I can console.log(fieldmap); and get what appears to be the proper response, and yet on inject.js line 39, the same fieldmap is undefined.
Any suggestions would be helpful as I'm completely lost here.