Chrome Extensions - onRequest/sendRequest vs onMessage/sendMessage [duplicate] - javascript

This question already has answers here:
Chrome Extension: Port error: Could not establish connection. Receiving end does not exist.
(2 answers)
Closed 9 years ago.
Checking out this sample extension linked by a page in the Chrome Extension center, I see they used
chrome.extension.onRequest.addListener(onRequest);
in the background.js page in order to listen to the contentscript.js and
chrome.extension.sendRequest({}, function(response) {});
in the contentscript.js in order to talk to the background.js page.
But I can't find the documentation for these functions anywhere in the web and Google's Message Passing guide only mentions
chrome.extension.sendMessage(...)
to send, and
chrome.extension.onMessage.addListener(...)
to listen.
Which functions should I use? Is sendRequest/onRequest obsolete? Is the Google's dev guide still up-to-date?

It seems sendMessage is favored over sendRequest, which is to be deprecated: http://codereview.chromium.org/9965005/

Also note the change in API path from
chrome.extension.onRequest
chrome.extension.sendRequest
to
chrome.runtime.onMessage
chrome.runtime.sendMessage
will save you getting frustrated over why e.g. chrome.extension.onMessage is not working!

Related

Firefox extension: cant use variables or functions from element movie_player on ytmusic [duplicate]

This question already has an answer here:
How to use youtube API in firefox extension?
(1 answer)
Closed 5 months ago.
i want to code a firefox extension where i can invite people to a "Yt-Music party" and it will sync up to the host YtMusic.
The element "movie_player" contains a lot of functions and variable which could be usefull, like the current time of the song.
For some reason the getCurrentTime() function works in the webconsole, but not when i have it like this, in my extension.
Do i need extra permission to do this?
Thanks in advance
const ytPlayer = document.getElementById('movie_player')
const test = ytPlayer.getCurrentTime()
console.log(test)
Extensions don't have direct access to elements on the page. You'd have to inject a content script, and then pass data (via messaging) between the page and the extension's background script (or service worker) to have this type of communication. Note also that content scripts don't get access to things like ytPlayer by default either.

'webRequest' event listener immediately failing in Chrome Extension [duplicate]

This question already has answers here:
"No matching signature" error on adding a chrome.webRequest listener
(1 answer)
Persistent Service Worker in Chrome Extension
(7 answers)
Closed 7 months ago.
My Goal
To write a browser extension which can use the webRequest permission. It needs to listen to the onResponseStarted event and read the response headers for the Content-Type. Based on specific content types, it will inject a content script that changes the content on the page.
Also, if there is an easier way to get the response headers, that would be preferred over getting this to work. See below for what I've already found.
My current position
Since I have only started on the extension, it is very simple. This is my manifest.json
{
// ... clutter like name and version removed ...
"manifest_version": 3,
"author": "Lakshya Raj",
"background": {
"service_worker": "handler.js"
},
"permissions": [
"webRequest"
]
}
And my handler.js
chrome.webRequest.onResponseStarted.addListener(function(details){
console.log(details);
});
I am on Windows 10, Google Chrome Version 103.0.5060.134 (Official Build) (64-bit).
Error(s)
In the extensions page, there are two errors listed for my extension (installed via "load unpacked")
(Warning) Service Worker Registration Failed. This shows a preview of my extension manifest with the text "handler.js" highlighted. No other information is provided.
(Error) Uncaught TypeError: No Matching Signature. This has two sections, context and stack trace. The content reads "extensions::webRequestEvent" (without formatting), while stack trace reads "Nothing to see here, move along."
Those aren't very useful error messages (at least to me), but that's all it says. I'm assuming someone on Stack Overflow has come upon this before and has a solution.
What I'm expecting
I expect that the details to be logged into the console when I navigate to a page, say https://stackoverflow.com/robots.txt. When the service worker is registered without errors, I can visit the extensions page page and click the link that reads "service worker". That takes me to the console where the output appears.
Stuff I've already researched
Apparently, it is really difficult to get response headers, but on continual search, I came upon this extension called Charset. Charset is able to get the response headers (as part of the functionality code), and it uses webRequest to do so. For this reason, I am trying the webRequest permission in my code. I also looked through the webRequest documentation and did a few unsuccessful Google searches.

Why am I getting a CORS error from just a simple Settimeout function in javascript? [duplicate]

This question already has answers here:
javascript modules and CORS
(4 answers)
Closed 10 months ago.
Everything is working fine in Chrome the problem is with FireFox and Microsoft Edge. With these two browsers I keep on getting CORS errors. I am making no API calls in this website. All this function that is causing this error is doing is resetting the opacity of some text I hid back to 1.
This is the function that is causing the error:
setTimeout(() => {
opacityP.style.opacity = 1;
opacityB.style.opacity = 1;
}, 3000);
This are the error message from FireFox and Microsoft Edge:
Thanks in advance for your help.
I think it's not possible to access local script files at the browser level.
You can run the code through a local server like localhost:3000 or so.
Xampp or Wamp would work for you.
If you're using VS Code, you can use their extension.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Hope this helps you!

Hide 401 console.error in chrome dev tools getting 401 on fetch() call [duplicate]

This question already has answers here:
Suppress Chrome 'Failed to load resource' messages in console
(3 answers)
Closed 5 years ago.
I have some code where i make a fetch call. This takes advantage of window.fetch api built into modern chrome / firefox.
The code sometimes hits a 401:unauthorized response. This is normal and I want it ignored, which I can do with the flow of the code. However, Chrome does show an unsightly console.error message when I try to run it.
How can I PROGRAMMATICALLY prevent this console error from showing in the dev console on all machines (i.e., no chrome dev filters or tampermonkey type plugins).
here's a sample to work off of:
fetch("http://httpstat.us/401", {requiredStatus: 'ok'})
.then(function() {
console.log("pass!");
}).catch(function() {
console.log("fail!");
});
Unfortunately, this cannot be done, as this type of message in the console is printed by chrome itself. Repressing this type of message has been debated for years, but the consensus seems to be that this message is desirable - see this discussion.
Just in case you're interested: As per this comment, the reason we're seeing this message is because the response to resource retrieval requests is evaluated, and messages are dispatched at the context level.
Essentially, the way chrome was written does not allow us to change this effect, and thus we have the error messages.

Detect if a Chrome extension is installed [duplicate]

This question already has answers here:
Check whether user has a Chrome extension installed
(17 answers)
Closed 5 years ago.
I want to detect if a Chrome extension is installed in user's browser. If not, I want to display a link to install the extension. If it is already installed, I want to hide the link.
This seems like a possible solution but I am confused what some_object_to_send_on_connect is supposed to be?
https://developer.chrome.com/extensions/extension#global-events
var myPort=chrome.extension.connect('jllpkdkcdjndhggodimiphkghogcpida', some_object_to_send_on_connect);
I know it's an old question, but since I managed to solve this problem (for my needs) I'd like to share.
I accomplished this by adding some info into the DOM. In extension's content.js file I have:
document.documentElement.setAttribute('extension-installed', true);
And in my page:
var isInstalled = document.documentElement.getAttribute('extension-installed');
if (isInstalled) {
...
}
I'm not sure if you want to check from a web page or from an already installed extension.
From a web page
You can't. Only Chrome Web Store can check that.
But if you write the extension and the web page, you could make your extension execute some content script in you page to confirm its installed and working.
From an extension
Provided you know the extension's id you are looking for, you can use
chrome.management.get(id, callback);
You can use chrome.management.getAll() to get a list of installed extensions, with more info than their id.
https://developer.chrome.com/extensions/management
Assuming you are the author of the extension, you can include a CustomEvent within your extension.js file, and within your site you can addEventListener to that event.
Within your extension:
const customEvent = new CustomEvent('myExtensionCheckEvent', {
detail: true // whatever value you enter here will be passed in the event
})
document.dispatchEvent(customEvent)
And your sites javascript file:
document.addEventListener('myExtensionCheckEvent', e => {
if (e.detail) {
// the extension is installed
}
})
Note that the key must be called detail.

Categories

Resources