Is there a way to run/execute a Chrome Extension in a new tab/window by loading the extension's code in that new tab or window?
Right now, the only way I know to get "free hosting" from Google for my Chrome extension, is to use the popup window as my main application window. That works fine, except for the fact that the popup window will close if you click on a different tab. So I think I need a different type of window as my main application window.
My only guess, is that you could set the window.location of the new tab to something like chrome://extensions/<my-extension-id> but that doesn't seem to work.
Can anyone alleviate my confusion? How to create a runtime for a Chrome app that isn't the popup, but isn't a native app, and isn't hosted by some web server other than Google's servers?
One thing I was thinking of was something like this:
https://gist.github.com/danharper/8364399
holy crap that was harder than it needed to be.
So you eventually end up at a url like this:
chrome-extension://<your-extension-id>/dist/index.html
to programmatically load a new tab or window, use this code in your background script:
chrome.tabs.create({url: chrome.extension.getURL('dist/index.html')});
in my case my app page, is located at dist/index.html, whereas my popup page will live at popup.html.
So the popup window looks something like this:
x Load extension in new window
x Load extension in new tab
the user selects one of those, and the background.js script can call the above code to load the page, which will load the html file from your extension codebase that you so desire.
Related
Chrome DevTools has a handy inspector for Local Storage and Session Storage, but is there nothing to inspect chrome.storage.sync?
chrome://sync-internals/ doesn't seem to display the actual contents of the synchronized storage per extension.
Storage Area Explorer extension provides a UI for viewing, editing, clearing, importing and exporting of chrome.storage.local, chrome.storage.sync, localStorage and sessionStorage.
In the future this feature may be implemented natively: https://crbug.com/848752.
Warning for ManifestV3: since devtools for service worker doesn't show storage, you'll have to open any visible page of your extension like the popup or options, right-click the page, then click "inspect", then go to Storage Explorer. If your extension doesn't have any visible pages, you can open chrome-extension://ID/manifest.json where ID is the id of the extension as shown in chrome://extensions page. Another method is to right-click any script from your extension in devtools (when you inspect the content script or service worker), then click "Open in a new tab". You can add a bookmark for this tab to open it quickly next time.
Visit chrome://sync-internals/
Click Sync Node Browser tab and wait for it to load (may give a blank screen or in progress cursor)
Click expansion triangle in the sidebar for Extension settings
Click on individual settings in the sidebar to see their values and other metadata
A poor workaround is to call get and obtain all the stored values. Of course, this doesn't let you conveniently edit them:
chrome.storage.sync.get(null, function callback(items) { console.log(items) });
Chrome DevTools has a handy inspector for Local Storage and Session Storage, but is there nothing to inspect chrome.storage.sync?
chrome://sync-internals/ doesn't seem to display the actual contents of the synchronized storage per extension.
Storage Area Explorer extension provides a UI for viewing, editing, clearing, importing and exporting of chrome.storage.local, chrome.storage.sync, localStorage and sessionStorage.
In the future this feature may be implemented natively: https://crbug.com/848752.
Warning for ManifestV3: since devtools for service worker doesn't show storage, you'll have to open any visible page of your extension like the popup or options, right-click the page, then click "inspect", then go to Storage Explorer. If your extension doesn't have any visible pages, you can open chrome-extension://ID/manifest.json where ID is the id of the extension as shown in chrome://extensions page. Another method is to right-click any script from your extension in devtools (when you inspect the content script or service worker), then click "Open in a new tab". You can add a bookmark for this tab to open it quickly next time.
Visit chrome://sync-internals/
Click Sync Node Browser tab and wait for it to load (may give a blank screen or in progress cursor)
Click expansion triangle in the sidebar for Extension settings
Click on individual settings in the sidebar to see their values and other metadata
A poor workaround is to call get and obtain all the stored values. Of course, this doesn't let you conveniently edit them:
chrome.storage.sync.get(null, function callback(items) { console.log(items) });
I'm trying to open a popup page from DOM event in content script js file.
I Tried to send message to background page and in the background listener to use:
chrome.browserAction.openPopup() but apparently it's not the way cause browserAction not defined in that context.
The extension is for audio streaming, so while browsing that the audio will keep playing in background.
I managed to make the audio playing work in the simple way: when clicking the extension icon => open's the popup => some event in the popup interact with the from the background and play's the music.
I want to make it work in the following way:
Content script will add button to the user web page(any page).
done
Clicking this button will open the popup, and from there, same logic.
The issue is that I don't know how to open the popup from the content script.
It's actually to trigger to extension icon click from code.
Any ideas?
I have a chrome extension which allows the user to perform actions and build up data. How can I get my chrome extension to open a new tab to allow my user to interact with the data they've accumulated? I could build a separate web app service where I pass the users data to. I currently persist the users data in local storage but I want a way for them to view/edit that data.
Not sure what exactly to google to get a chrome extensions to launch a new page under it's url...
Edit:
Ideally I'd like for my user to press a button from the popup.html popup to open up the new tab, if possible.
I got it to work, basically from the popup.html page I can make this javascript call,
chrome.tabs.create({url: chrome.extension.getURL('dashboard.html')})
where 'dashboard.html' is file belonging to my chrome extension.
Had a qq: is it possible to launch an extension (that is already installed) when someone clicks on a link ?
For example, let's say on my website I have a button that says "click here to launch the extension". After they install my chrome extension, when a user clicks on this button, could the extension launch? (e.g.- the popup to open).
The goal is this: I have an extension that acts like a search bar. I also have search on the website, but I wanted it to search using the extension instead of the website if a user chooses to.
Thanks for any info,
Y
If you are asking for a way to programmatically open the extension's popup, then you will be disappointed (as it cannot be done).
If it serves your purpose, you could do something like this:
Have your extension inject a content script into your webpage.
Have the content script bind to a button's click event.
When the button is clicked: Pass some parameters to the extension's background page, let the extension perform the search and send the results back to the webpage.