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));
});
Related
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
I'm writing a Chrome userscript to open a new tab, then click on some DOM elements. But how can I access the DOM of the new tab?
/* background script */
chrome.browserAction.onClicked.addListener(() => {
chrome.tabs.create({"url": MY_URL, (tab) => {
// What ought I to do?
});
});
You will need to have at least one content script file loaded in your tab (with the right permissions to allow the content script to be loaded).
In the content script, you will have to leverage the Messaging API to communicate with the background page.
If your logic is simple enough, you could even run all logic directly inside content script, as they have access to be same set of chrome API as the background page.
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)
After messing around with Chrome Extension I noticed that when you are on the chrome://extensions page a background script initiated in the manifest file will run where as if you are just browsing the internet or on another other page besides the extension page the background script will not run.
Here is what I mean:
In my Manifest file:
"background": {
"scripts": ["jquery-latest.js","background.js"]
},
Now in the background.js file:
$(document).ready(function(){
alert("working");
});
I use a simple alert function to see if this will work and found out that alert("working"); only gets displayed when I am on the chrome://extension directory. If I go to google.com or something of that sort, no cigar.
My question lies in, why does this happen? How do I change it so it does alert no matter what.
The background script should be viewed as "running in the background of the Chrome browser".
Your desired effect (running a script for every page) is actually a task for content scripts.
To learn more, read https://developer.chrome.com/extensions/overview.html#arch.
It is because you are using the background page .. use the event page instead by slightly modifying the manifest.json..
Try adding this:
"background": {
"scripts": ["jquery-latest.js","background.js"],
"persistent": false
},
for more details on event pages check this : https://developer.chrome.com/extensions/event_pages
The effect is produced because whenever you load chrome://extensions it forces the extensions to reload, the same behavior can be reproduced using CTRL+R. So every time, the background page got a fresh reload, which doesn't happen in case of other pages.
The background script is a script running in the background to handle majority of chrome events that content scripts cannot. Content scripts are purely the content of the each page. Both cannot speak to each other, however, you can give the scripts listeners (e.g. chrome.browserAction.addListener(myFunction) plays the function when the button in the top right of your screen for the extension is clicked) order to find out whether a button has been pressed or even send a message from the background script into the page's console.
https://youtu.be/ew9ut7ixIlI
This video was a great introduction for me about background scripts, however, the part where he begins to talk about the listeners and such is 6:30.
I'm trying to make an extension that will collect some data from currently opened tab on Google chrome.
I also use a popup in my extension to provide a control interface (buttons and stuff).
I need to be able to do the following:
1) Read source code of currently opened tab.
2) To be able to scroll down window content (using the code of course) .
If I could only get access to a javascript "window" object of currently opened tab , that would be enough.
But I'm open for another suggestions .
Can anyone help ?
You can simple use document in a content_script. Content scripts are defined in the manifest.json. In your case you should set "run_at": "document_end", so the dom is fully loaded when your script is called.
For more informations about content scripts and chrome extension development you find an easy to use guide from google - http://code.google.com/chrome/extensions/content_scripts.html
Code from popup won't be able to access directly to window objects from displayed tabs. You have to use a content script which will be able to send the source code of opened tab to the background page. This content script will also be able to scroll the window of opened tab.