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.
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) });
My background page saves data about the current active tab to chrome.storage.local. For arguments sake lets say it's the page title. Multiple page titles will be in there if the user has multiple tabs open.
When the browser action button is clicked I want to open a new tab with my internal extension page showthedata.html (not an external URL) which will show the data saved for the active tab.
Ideally I'd want to open showthedata.html?tabID=123 which would then pull the corresponding data
I must be missing something basic, but how can showthedata.html show the data relating to the active tab?
If you use your extension's URI as the URL of your new tab, it will allow you to use the API's messaging and storage systems from your new tab.
Create a New Tab
chrome.tabs.create({url: "chrome-extension://<your_extension_id>/path/to/file.html"})
Once you get that set up, you can pass variables to or request variables from your new tab via the Chrome API messaging system or storage system (provided you've built the proper functionality into your extension's various parts).
Note: The chrome.tabs namespace is not accessible from within a Chrome tab. It must be called from either your background script(s) or popup.
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.
I’ve been placing a page action on the options page of my Chrome extension. options.js calls chrome.runtime.connect({"name":"someName"}), and background.js has
chrome.runtime.onConnect.addListener(function(port) {
chrome.pageAction.show(port.sender.tab.id);
});
Unfortunately, in the new options_ui with the recommended default (and someday mandatory) "open_in_tab":false, the Sender's tab won't be set. Is there a way to get the tab id in order to show the page action?
I could use tabs.query to get the chrome://extensions/ tab, but that requires the tabs permission, which I currently don’t need. Active tab seems like it would work, but it doesn’t provide the tab id and isn’t enabled by opening an option dialog (source).
(Why do I want the page action on my options page? The extension works with a website that is only available ~7-10 weeks per year. I’d like my users to be able to interact with the extension the rest of the time, so that they can get used to the process. But I don’t want to adjust the displayed extension permissions just to do so. I can accomplish this by having the options page pretend to be the website in question.)