I am trying to migrate my extension which records screen/tab/window according to the chosen option from manifest V2 to V3. In manifest V2 I was able to use background script as persistent and reach html page objects such as mediaRecorder, navigator. However in manifest V3 background script works as a service worker. So, I have to start the screen record in content-scripts to be able to reach the html objects. When I start chrome.desktopCapture API from the background script, I have to start the screenRecord in one of the tabs (should give a tabid to chrome.desktopCapture.chooseDesktopMedia API call). I cannot start it on the background page and when the page was refreshed or changed to a new URL screen record stops. Is there any workaround for this?
I believe the best way to handle updates such as a URL change on a tab is to attach the onUpdated listener to the chrome tabs in the background script.
chrome.tabs.onUpdated.addListener(function(tabId, changes, tab) {
//Detect Type of Change and Handle Accordingly
});
There are quite a few other events that may be of use that are listed in the chrome documentation Chrome Tabs Events. It's also possible to inject inline JavaScript from the content script so you can access the pages window object directly and attach event listeners there to handle reloads or URL changes. Check this stack overflow post for more information Modify Window Object in Chrome Extension
Related
So, here's is my doubt.
I'm using the MediaRecorder API, to make a recording of my browser's screen. I can capture the whole browser screen + audio(tab) + my microphone. Everything is working fine. But I only need to capture the screen+audio from the tab that started the recording. On that popup thats opens on google chrome, when I want to screenshare some tab or application, is it possible to show only the tab that started the screenshare? So I don't have to seek everytime the tab that I want to share.
I didn't find any information about that.
When working with the google chrome API, I see that we can capture only a tab, but outside this API, is it possible to accomplish something similar? Or is only possible to work with pre-selected tab if I develop a google chrome extension?
chrome.tabCapture.capture({audio: true, video: true}, callback);
Unfortunately you can't specify it or limit it to the current tab.
Note: Constraints never cause changes to the list of sources available
for capture by the Screen Sharing API. This ensures that web
applications can’t force the user to share specific content by
restricting the source list until only one item is left
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture
I am trying to develop a chrome extension which saves the url of webpages opened in all tabs and then load them whenever needed. Now I know content scripts, background scripts and popup.js. Content scripts mainly deal with the content of the loaded webpage and they have less chrome api interactions, background scripts are executed in an isolated environment and we can use all chrome api methods, popup.js is simply javascript that runs in context of popup.html.
Now here is my problem, I have a button in popup.html named "save" and on click of that button I want to save all the webpage urls opened in multiple tabs under one window. How can I do that?
Should I write a content or a background script?
Sorry for my noobish question. I am new to chrome api. Any help/suggestions?
Neither content script or background page is needed. You could do that just in popup.js, since popup page actually runs in the same context with extension.
In your popup.js, just call chrome.tabs.query to get tab info, including url (you would need to declare tabs permissions in manifest.json). If you want to specify window id, either use WINDOW_ID_CURRENT or retrieve it through other ways (depends on your logic)
chrome.tabs.query({ windowId: YOUR_WINDOW_ID }, (tabs) => {
tabs.forEach((tab) => console.log(tab.url));
});
Is there a way to automatically switch the frame of the javascript console to one belonging to a chrome extension when I refresh the page?
I'm afraid not, to my knowledge the execution context will always start at the top frame.
Additionally, there doesn't seem to be any programmatic method of accessing the Console tab to change that from a DevTools extension.
I am working on a Firefox Extension, using the SDK. The addon will be changing the CSS on specific websites (by attaching a stylesheets in the head). They obviously need to be attached before the main content of the page loads.
I need to be able to listen for the URL of a tab changing, and attach a script, before the tab content has loaded. The script will wait until the <head> has loaded before attaching the stylesheets.
I tried using tabs.on('ready', function(tab) { tab.attach(...) } ), but this does not work, because it listens for the tab to be fully loaded, and then runs the code inside the function()
I also tried pageMod, but this does the same as the above. It attaches to the pages I need it to, but only after they are fully loaded.
Does anyone know how to detect for a tab URL change, before the page is ready?
Note: Please do not answer with a setInterval() method, I cannot state this enough!
I worked out how to do it, I had not read the pageMod documentation well enough.
You can specify when the script is attached, using contentScriptWhen: "when", where when can be start, ready or end (obviously I used start)
How can I make a Chrome extensions that is not a popup or a button?
I wanna have a script running whenever the window is opened and iterate thru all its tabs performing actions on each tab.
I also need (is this possible?) want to add to the same extension buttons (+keyboard shortcuts?) that when clicked, perform actions on all tabs.
Then I need control on these buttons visibility, and make them visible only in certain conditions (e.g. show only when page is loading, hide when not-loading).
Where do I put my script and how do I refer to it in my *.json manifest?
Any info/links will be appreciated.
The answers to 0 and 1 can directly be found in the documentation, specifically background pages, chrome.windows API and chrome.tabs API.
To bind global events, use the chrome.experimental.keybinding API. Because this API is experimental, you have to enable it first at chrome://flags. Also, the extension cannot be uploaded to the Chrome Web store.
If you want to add an "extension button" which performs some action on click, define a browser action and bind an event listener to chrome.browserAction.onClicked.
To select all tabs, use chrome.tabs.query({}, callback) method ({} means no filter, so all tabs are selected).
Browser action buttons are always visible. If you want to create a button which is not always visible, use a page action instead. The chrome.tabs module includes several events which can be used to find out whether your conditions are met.
As for putting up the script and the manifest file, read the documentation on Manifest files and explore some examples.