We are converting an extension from Chrome to Edge and the local storage is not behaving as expected.
In the extension we have an options page defined in the manifest as so:
"options_ui": {
"page": "options.html"
},
After converting to Edge using the "Microsoft Edge Extension Toolkit" the extension loads in Edge and we are able to view the options page and save the data. Looking at the debugger -> Local Storage we can see the options object saved.
In Chrome we are able to access this object from the background script and popup page however on Edge when I view the Local Storage on the Debugger for either the background or popup there is no object for the options in local storage. We are able to write to local storage from both but each one is entirely separate and we don't seem able to share data this way.
Is this intended on Edge and is there an alternative to make the options page data available to background and popup?
I was having this same problem when I was creating a new extension. I was making live changes to the javascript file and refreshing the page and noticed the same thing:
1. Options page -> save to localstorage
2. Popup -> retrieve from localstorage -> null
3. Options Page -> Checked Storage in the debugger -> value was there
4. Popup -> Checked Storage in debugger -> no values
So I tried reloading the extension in edge (More -> Extensions -> your_extension -> reload extension)
After that I repeated the steps above and I was able to retrieve the values in localstorage from my popup that had been saved to localstorage from my options page.
Related
I am new to developing Chrome Extensions.
I am trying to get the values for one of the keys which is stored in my browser's localstorage (inspect -> Application -> Localstorage). What I want to do is in my Chrome Extension, when you click a button, I just need it to fetch the value from localstorage for the page which is open in my browser's current tab.
This is the JS function which I am using -
chrome.storage.local.get(['granted.selected'], function(result) {
console.log('Value currently is ' + result.granted.selected);
});
granted.selected - is the name of the key whose value I want to fetch.
When this executes, I get "Value currently is undefined" whereas I want it to fetch the values stored in the above key (granted.selected).
What do I need to add to have this fetch the value for that key from my current open tab's localstorage?
In short - Just want to access a webpage's localStorage from a Chrome extension.
Any help will be greatly appreciated. Thanks!!
chrome.storage.local is not localStorage, it's a completely different storage API.
localStorage is a DOM storage.
To access DOM of a web page you need a content script [1].
Here's an example of programmatic injection in the popup script or in the background script:
chrome.tabs.executeScript({
code: 'localStorage["keyName"]'
}, ([result] = []) => {
if (!chrome.runtime.lastError) {
console.log(result);
// use the result here inside the callback
}
});
Notes:
You'll need permissions in manifest.json as explained in [1].
keyName is the name of the key as seen in devtools "Application" panel of the web page
each part of an extension has its own devtools console.
I'm coding an extension which downloads a file, before downloading the file, I need to get a token which is already generated from the website on loading.
This token can be viewed from the console by typing >GetPublicTokenResult
How can I read this variable into my content script?
I've tried the following:
chrome.storage.local.get(["GetPublicTokenResult"], function(items){ items = [ { "yourBody": "myBody" } ]
console.log(items);
});
but it seems that this variable is not stored in Storage, but it can be viewed in Memory snap
Content scripts run in an isolated environment from the page. They can only interact with the DOM, javascript code can't be accesed. You need to inject your code directly in the page. Check out Insert code into the page context using a content script for a detailed tutorial.
Is this still valid?
"app": {
"launch": {
"local_path": "window.html",
"container": "tab"
}
},
I'm using Chrome v46 and it works but I'd like to be sure it is not a bug.
I cannot see anything like this in the manifest file reference
Your manifest snippet (containing app.launch.local_path) describes a legacy packaged app. These are deprecated and not officially supported any more.
If you want to have an icon in the app launcher, then you need to create a Chrome app (if you want to host the content in the package) or a hosted app (if you want to host the content online).
If you don't want to create an app, but an extension, then you could use a browser action button to add a button to the toolbar, and then open a page in a new tab using chrome.tabs.create. Or, if your actual goal is replacing the new tab page, use chrome_url_overrides to override newtab.
Ok, so just the other day I learned that you can inspect the devtools if it is in its own window(explained here). I also learned that you can style the devtools with your own css by editing the Custom.css file in your profile on your computer(more on that here).
What I want to do is not only add css, but also javascript, via a chrome extension. I am very aware of devtools pages, but those do not do what I want. Pretty much I want to get a content script to run on the devtools inspector itself. I found one extension that does exactly this, but for the life of me I have not been able to replicate it(even when copy-pasting the code!!). The extension is the "Discover DevTools Companion extension" from Code School(on the webstore). They even explain how it works, but I still have had no luck. That was the only extension I have found that does what I want. So I guess what I'm really asking is if its just me that cannot get it to work or if others that try are having trouble also.
Usually, you cannot create a Chrome extension which injects code in a devtools page.
The "Discover DevTools Companion" extension from now on, referred to as DDC is allowed to do this, because this extension is whitelisted in the source code of Chromium: (this is no longer the case)
// Whitelist "Discover DevTools Companion" extension from Google that
// needs the ability to script DevTools pages. Companion will assist
// online courses and will be needed while the online educational programs
// are in place.
scripting_whitelist_.push_back("angkfkebojeancgemegoedelbnjgcgme");
If you want to publish an extension in the Chrome Web Store with these capabilities, give up.
If you want to create such an extension for personal / internal use, read further.
Method 1: Impersonate the DDC a whitelisted extension
The easiest way to create an extension with such permissions is to create an extension with the extension ID of a whitelisted extension (e.g. ChromeVox). This is achieved by copying the "key" key of its manifest file to your extension's manifest (see also: How to get the key?). This is a minimal example:
manifest.json
{
// WARNING: Do NOT load this extension if you use ChromeVox!
// WARNING: Do NOT load this extension if you use ChromeVox!
// WARNING: This is a REALLY BIG HAMMER.
"content_scripts": [{
"js": [ "run_as_devtools.js" ],
"matches": [ "<all_urls>" ]
}],
// This is the key for kgejglhpjiefppelpmljglcjbhoiplfn (ChromeVox)
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEGBi/oD7Yl/Y16w3+gee/95/EUpRZ2U6c+8orV5ei+3CRsBsoXI/DPGBauZ3rWQ47aQnfoG00sXigFdJA2NhNK9OgmRA2evnsRRbjYm2BG1twpaLsgQPPus3PyczbDCvhFu8k24wzFyEtxLrfxAGBseBPb9QrCz7B4k2QgxD/CwIDAQAB",
"manifest_version": 2,
"name": "Elevated Devtools extension",
"version": "1.0"
}
run_as_devtools.js
if (location.protocol === 'chrome-devtools:') (function() {
'use strict';
// Whatever you want to do with the devtools.
})();
Note: This method is truly a hack. Since the extension shares the same ID as ChromeVox, both extensions cannot co-exist. And if Chrome decides to remove the whitelisted extension, then your permissions will evaporate.
Instead of filtering via the content script, you can also use the include_globs key to restrict the content script to devtools only.
Method 2: Modify resources.pak
I suggest to go with method 1 if possible. When method 1 fails (e.g. because the extension is no longer whitelisted), use the next method.
Get paktools.py, unpack.py and pack.py from DennisKehrig/patch_devtools (on Github).
Locate your Chrome directory containing resources.pak.
Run python2 unpack.py resources.pak, which creates a directory resources containing all files (all file names are numbers).
Locate the file containing a script which runs in the context of the developer tools. Add your desired code there.
Remove resources.pak
Run python2 pack.py resources to create the new resources.pak file.
Note: resources.pak may be replaced when Chrome is updated, so I suggest to create a script which automates my described algorithm. That shouldn't be too difficult.
If you're interested, you can look up the .pak file format in ui/base/resource/data_pack_literal.cc (description in human language).
For those googlers who end up at this page (as I did) looking for something else, this page answers the question of manipulating DevTools ITSELF - not adding jQuery to DevTools, or injecting javaScript onto a web page. For those, see here instead:
Inject jQuery into DevTools (Chrome or Firefox):
Firefox DevTools: Automatically injecting jQuery
Inject your own javascript/css onto any web page:
How to edit a website's background colors
I'm writing an extension in Google chrome and Opera
I need to watch for specific URLs loaded, when i type one url in the address bar.
example:
if i goto www.google.com, it will load couple of other urls / images, etc.. those will be shown in Developer tools->Network.
Is there anyway, i can access that log from my extension background page?
Please let me know
Not really, but you can listen for load events that will fire on the images inside the page:
document.addEventListener('load', function(e){ /* e.target is a newly loaded image */ }, true)
Whether this solves your problem depends on what your use case is exactly..