How to send a message from puppeteer to a chrome extension? - google-chrome-extension

I wrote a chrome extension that recording a screen by using chrome.tabCapture API. I want to be able to start and stop recording by using puppeteer.
Starting a recording was an easy part because I need to start it from the beginning - I'm just sending a message from the content script:
setTimeout(function(){
chrome.runtime.sendMessage({ action: "START_CAPTURING"}, function(response) {});
}, 100);
Now, I can't figure out how can I send a message from puppeteer to the background script to stop the capturing.
I tried to add a button to the page and waiting for the click event inside the content script:
var button = document.getElementById("stopBtn");
button.addEventListener("click", function() {
chrome.runtime.sendMessage({ action: "STOP_CAPTURING"}, function(response) {});
}, false);
It works. The problem with this approach is that even if I'm the owner of the content and able to add an additional element just for sake of
recording, it seems to me not an elegant solution.
I would expect to be able to send messages from puppeteer to extensions or calling functions declared in there.

Related

How to correctly remove event listeners registered on chrome.runtime.onMessage in devtools page?

I created a custom devtool panel in my chrome extension. Within that devtool page I registered some event listeners on chrome.runtime.onMessage in useEffect and I attempt to remove those event listeners during unmount like this:
useEffect(() => {
const handler = (request) => {
// do something when receive message
}
chrome.runtime.onMessage.addListener(handler);
return () => {
// not be called when I close devtool panels
chrome.runtime.onMessage.removeListener(handler);
}
}, []);
However I found that when I close the devtools, the unmount function can not be executed so that I think those event listeners are not removed correctly. I wrote some testing code to verify if those event callbacks are still able to be invoked after devtools being closed. It turns out that those callbacks are not executed. I guess the reason would be that those callback functions are destroyed when I close the devtools along with other resources. Now I am not sure about whether those "ineffective" event callbacks are still in the callback list of chrome.runtime.onMessage. If they are, would it be a trouble? What is the correct way to cleanup those listeners?
Thanks in advance!

nodejs manual progress indicator for post request

Am trying to get the progress of a normal post request that takes at least 5 to 10sec. This request is validating data and uploading files to third party api.
The issue is, i want to display some kind of progress feedback on my react app for it.
I've been using axios onUploadProgress and onDownloadProgress and checking what is happening but nothing.
onUploadProgress: (progress) => {
console.log("onUpload", progress)
},
onDownloadProgress: (progress) => {
console.error("onDownload ", progress)
}
How can i for every step i have in my node controller send back a manual progress indicator ?

Wait for Electron window to be a specific URL?

So I am writing an application in Node.js and Electron, and I am trying to login through Google on the same session, then get another URL. I have the session working and the login to Google working, but when I login to Google, I want it to switch and load another URL. The current idea I have is something like this:
win.loadURL('https://accounts.google.com/').then(() => {
});
setInterval(() => {
while (!win.webContents.getURL().includes("myaccount.google")) {
if (win.webContents.getURL().includes("myaccount.google")) {
break;
}
}
clearInterval();
}, 100);
win.loadURL('http://' + url);
I just don't know what else to do, I know this is fairly spaghetti but I've tried so many things and nothing seems to work correctly. I feel like I shouldn't even be doing a while loop at all because it seems to freeze my browser (understandably).
Listen for the event 'did-navigate'. I would like to but I can't test this for you at this time.
Also: electron webview navigation event

use socket.io in chrome extension

Actually i want use socket on chrome extension.Connection should start when i open tab and it will get disconnect until chrome will get close now if i will create socket connection on content script then every time socket will get disconnect and connect again when page will get refresh so that
I have created connection on background script.
background script code:
chrome.tabs.onCreated.addListener(function callback(tabId, info){
socket = io.connect('http://localhost:3000');
});
Now i want to use same socket on content script..
for this i have made a callback on chrome.runtime.onMessage.addListener.
Callback request has came at content script but emit and on doesn't work
background script code:
chrome.runtime.onMessage.addListener( (request, sender, sendResponse)=> {
sendResponse(JSON.stringify(socket))
})

Listen to click event in web page chrome extension

Am developing a chrome extension. Am injecting a script in a wbpage using contentscript as follows:
var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
(document.head||document.documentElement).appendChild(s);
My script.js:
$.post("https://www.example.com/srv/example/", function(html){
$("body").prepend(html);
});
Now, i would like to listen to a button click event in the webpage DOM ? How to achieve this?
You can listen with
document.body.addEventListener('click', yourListenerFunction, true);
BTW, you're executing your content script in a very odd way. The usual is using some code in your background.js, like:
chrome.tabs.executeScript(tabId, {file:"yourScriptFile.js"});
I recommend this https://developer.chrome.com/extensions/overview

Resources