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.
Related
I tried to access information stored in chrome.storage.session in my content script, but the browser keeps informing me that "Access to storage is not allowed from this context" even though I enabled "storage" in manifest.json
After fetching some data in my background script, I store the received
chrome.storage.session.set({"data": data});
However, when I try to access it in my content script by running the following line:
chrome.storage.session.get(["data"],function(data){console.log(data)})
I got the following error:
Uncaught TypeError: Cannot read properties of undefined (reading 'session')
However, when I run the exact same command in my background script, I was able to retrieve the data.
I also made sure I enabled "storage" permission in my manifest.json. Why is this happening?
Thanks so much in advance!
Access to storage is not allowed from this context
As the documentation says session is only for trusted contexts by default.
To enable it in the content scripts call setAccessLevel from such a trusted context i.e. in the background script or in an extension page like the action popup or options.
chrome.storage.session.setAccessLevel({ accessLevel: 'TRUSTED_AND_UNTRUSTED_CONTEXTS' });
Cannot read properties of undefined (reading 'session')
This error says that the parent of session is undefined i.e. chrome.storage is undefined, which can only happen in these cases:
you didn't reload the extension after editing manifest.json
an orphaned content script tried to access storage after you reloaded or updated the extension
your code is not a content script, but just a page script e.g. you ran it in a script element or injected with world: 'MAIN'.
I am writing a chrome extension, using a content script to inject some javascript code. As follows:
let actualCode = 'My Injected JS Code';
let script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
For the injected script, I would like to use some value stored in chrome.storage.sync. However, I found that the API is unaccessible to the injected script (storage.sync is undefined). The API is only accessible within the content script, but not for the injected script. Any ideas how I could access chrome.storage API for the injected script too?
PS: I've registered the storage API in manifest.json
PS: When I open the developer's console on chrome and type "chrome.storage", it returns undefined too. I think this might be a permission problem?
The inject way you used for the script, made it work in the web page environment, which doesn't have access to most of Chrome Extensions API.
However, there is an option to use Messages API which allows sending requests from a webpage to the extension by ID.
In this case, you also need to implement a listener in your background page, to answer such requests.
P.S. chrome.storage API also shouldn't be available from page console. You may want to debug it from your background page console or select a content script environment (if the extension has such):
you can use window.postMessage({type : "MESSAGE_NAME"}) in injected script to send "message" event. then use windows.addEventListner("message", callback) in content_script to listen on "message" event.
You can specify the type of message to which you want to listen in the callback function. for instance
in content_script.js
function func_callback(){
if (event.data.type && event.data.type === "MESSAGE_NAME") {
# Your code
}`enter code here`
}
windows.addEventListner("message", func_callback)
in injected_script.js
<button onClick={()=>window.postMessage({type : "MESSAGE_NAME"})}></button>
I'm trying to display an Instagram feed on my website. I am not familiar with server side scripts. The explanations I have read go over my head.
I have managed to get an access key through Instagram but I don't know how to proceed.
I also tried the instructions from a video "How to implement an Instagram Feed in PHP without using the Instagram API"
For that, my php file works, displays the feed but I don't understand how to make it appear on my html page.
I'd be happy to make either method work.
In your HTML you should include a JavaScript 'script' element where you do something called an AJAX Request. The request will access the PHP file that produces the Instagram feed. ECHO the result from the PHP file and it will be returned into the DATA variable in the AJAX request. The request looks roughly like this:
$.ajax({
method: ‘POST or GET, most likely POST’,
url: ‘not always an actual url, this is the path to your PHP file’,
success: function(data) {
//php file returns into variable ‘data’
//display the feed within this function
}
});
The result from the PHP file should be echo’d back in JSON notation, if it isn’t, just add this to end of PHP the file:
$whatever = json_encode($your_result);
echo $whatever; //this is still the feed, just encoded in JSON
And if you need to decode it for some reason, just do
json_decode($variable_to_decode);
There are other parameters you can use in the AJAX request, like if for instance you need access to certain variables in your PHP file, that currently only exist in your HTML document.
this was solved by saving the html as php. i don't know why that is but it worked
I read in https://developer.chrome.com/extensions/storage
that it is possible for a content script to read directly from the storage api.
I have a setting page where i allow the user to save credentials, and i want to access those credentials from the content script. for some reason when i "get" from the content-script i get empty values...
Also -
How can i debug and see the Storage data from Chrome Developer tools?
chrome.storage.sync.get({'username':undefined,'password':undefined}, function(items) {
console.log(items.username)
username = items.username;
password = items.password;
console.log(typeof(username))
});
I Found that if i don't use the Dictionary in the .get api it works.
For some reason(probably a bug) when using the dictionary interface from content-script it doesn't find the data.
From the setting page the .get with dictionary worked.
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