I'm working on a google chrome extension which has a button and a popup-overlay. Inside this extension, I set and remove cookies for the user. During development, the extension is making requests to localhost:8080 and (I assume) cookies are being set with localhost as the domain.
The problem is, I can't figure out how to view these cookies in a list from within Chrome. Firefox has a simple feature for viewing all the cookies set by various hostnames and Chrome appears to as well (although I'm less familiar with the developer tools in Chrome). But in Chrome's cookie list, I can't find any cookies set for localhost, nor any cookies for my extension, whatsoever. I've tried a few 3rd party cookie extensions too -- no luck there either.
Will cookies set by extensions appear in the same place as cookies set by normal websites? If so, why am I not seeing them? Help appreciated. Thanks!
Yes they appear in sample place.. I have written a sample extension for demonstration; Screen shot taken after testing this for developer.chrome.com domain
Sample Extension:
manifest.json
{
"name" : "Cookie API Demo",
"version" : "1",
"description" : "This is demonstration of Cookie API",
"permissions": [ "cookies","<all_urls>"],
"browser_action": {
"default_icon": "screen.png",
"default_popup":"popup.html"
},
"manifest_version": 2
}
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
function cookieinfo(){
chrome.cookies.getAll({},function (cookie){
console.log(cookie.length);
for(i=0;i<cookie.length;i++){
console.log(JSON.stringify(cookie[i]));
}
});
chrome.cookies.getAllCookieStores(function (cookiestores){
for(i=0;i<cookiestores.length;i++){
console.log(JSON.stringify(cookiestores[i]));
}
});
chrome.cookies.set({"name":"Sample1","url":"http://developer.chrome.com/extensions/cookies.html","value":"Dummy Data"},function (cookie){
console.log(JSON.stringify(cookie));
console.log(chrome.extension.lastError);
console.log(chrome.runtime.lastError);
});
chrome.cookies.onChanged.addListener(function (changeInfo){
console.log(JSON.stringify(changeInfo));
});
}
window.onload=cookieinfo;
Well I figured it out. It's a forehead slapper, but I'll post the answer here anyway in case others need help.
The cookies for the overlay extension only show up in the "developer tools" if you inspect the overlay element. That is, if you close the overlay and click the wrench button, developer tools, resources, cookies, the only thing you'll see there are cookies for the underlying page.
In order to see cookies for an overlay extension, right-click INSIDE the overlay and "inspect element". The cookies do show up there, and the "domain" they're attached to is the extension's unique id (kackjckjckjckcjckjckcjkcjckcj or what-have-you).
Random note: At the time of this writing, the Jquery cookies plugin always kills your cookies at session, no matter what you set the expiration to. In order to get my cookies to persist (survive) beyond browser close, I had to include good old-fashioned setCookie() and getCookie() functions and get rid of Jquery cookies.
In your browser - visit:
chrome://settings/cookies
I just set it as the address for a bookmark in chrome - and then just click my bookmark when I want to see the cookies
Related
I'm trying to implement an extension that can auto fill all fields in an application website. Currently it works great in main frame, but doesn't work if the fields are in a iframe.
I'm allowing users to either use content script to auto inject JS or click a button to inject JS manually.
The problem I have is my JS is not injecting into iframe even I set allFrames to true, but content script work.
"content_scripts" : [
{
"matches" : ["https://*/my_url/*"],
"js" : ["/auto_fill.js"],
"all_frames": true
}
]
This content scripts work fine, JS is being injected. However,
my_button.addEventListener('click', () => {
chrome.tabs.executeScript(null, {
file : "/auto_fill.js",
allFrames : true
})
});
This executeScript doesn't work, nothing happen.
The iframe I'm trying to work with is kinda a dynamic iframe (where I have to click few buttons to load and navigate to the application site I want)
Do I have to find out the iframe id or tab id in order for this to work, please provide some hints.
Please let me know if I'm not making myself clear.
Thank you so much for your time.
As the comments revealed, the extension is using the activeTab permission without host URL patterns (just as the documentation suggests), but this permission only grants access to the tab's main URL. When an iframe points to a different URL origin, it won't be granted by activeTab, which is an intentional restriction enforced since Chrome 45, see https://crbug.com/826433.
I am making a Chrome Extension with Login functionality from Auth0, to do that, if user clicks on a login button, it shows login page from Auth0.
On my local machine, I am using local folder to load unpacked extension, then when I click login button, it shows login popup page.
But When I click pack extension, it stops showing Popup page.
My Manifest includes:
"permissions": [
"tabs",
"storage",
"identity",
"notifications"
]
"oauth2": {
"client_id": "***.apps.googleusercontent.com",
"scopes": ["profile"]
}
I checked on background page library JS files for auth0 is also loading.
What else can be problem here?
Problem is with Allowed Callback URLs on auth0 settings and Chrome Extension ID.
On Auth0 setting, my callback URL is https://some-id-for-my-extesion.chromiumapp.org/auth0, this ID is same if developer chooses source code folder because I included export key in my manifest.json.
However, when I pack my extension, it gives me different ID for extension even I don't specify key, and manifest.json still includes export key.So after packing my ID would be packed-ext-id, so my callback URL also should be http://packed-ext-id.chromiumapp.org/auth0
If you come up with this problem, please check callback URLs on auth0, and make sure it matches with extension.
You can see ID below your extension.
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 am trying to write an extension that adds functionality to the Chrome devtools.
According to the devtools documentation, it says that the pages in devtools support very limited apis. Any API that is not supported can be access by accessing it through the background page, just as what contentscripts does.
Here is the relevant documentation snippet:
The tabId property provides the tab identifier that you can use with the chrome.tabs.* API calls. However, please note that chrome.tabs.* API is not exposed to the Developer Tools extension pages due to security considerations — you will need to pass the tab ID to the background page and invoke the chrome.tabs.* API functions from there.
Here is the source url: http://developer.chrome.com/extensions/devtools.inspectedWindow.html
However, when I try to do that, I get the following error in the console:
uncaught Error: "getBackgroundPage" can only be used in extension processes. See the content scripts documentation for more details.
Here is my code in my devtools.js script:
chrome.extension.getBackgroundPage().getLocation();
What am I doing wrong?
EDIT
I should describe my scenario first, and show how I am implementing it.
What I want to do is to display extra data in a devtools panel related to a webpage. In order to get that data, I will need to send a HTTP request in the same session as the page being debugged, because it requires authentication.
Use Case:
User browses to a particular URL. He is authenticated to the site. He then invokes devtools. The devtools panel opens up and a new panel shows up that has extra data related to the page.
Implementation:
1) DevTools script finds out the url of the page being inspected. If the url matches the site base hostname, then it opens a panel. In the callback of the panel creation, it sends a message to a background page, asking it to download a JSON payload from a debug endpoint on the same site, and then sends it to the devtools extension, wh ich then displays it.
Problems:
1) The background page gets the request, and downloads the URL. However the download is not using the same session as the user, so the download request fails.
2) From devtools window, I got the tabId of the inspected window. I send this tabId to the background page so that it can parse some stuff out of the url. However, chrome.tabs.get(tabId) does not return the tab.
To summarize, I need to
1) Get the background page to download data in the same session as the user's tab that is being debugged.
2) I need to have the background page be able to get access to the user's tab.
The APIs available to extension pages within the Developer Tools window include all devtools modules listed above and chrome.extension API. Other extension APIs are not available to the Developer Tools pages, but you may invoke them by sending a request to the background page of your extension, similarly to how it's done in the content scripts.
I guess the documentation is little ambiguous, By chrome.extension API they mean the Supported API's for content scripts.
So, you can use long lived communication for communication between inspected page and background page
Demonstration:
The following code illustrate scenario where a devtools page need some information from background page, it uses messages for communication.
manifest.json
Ensured permissions are all available in manifest file
{
"name":"Inspected Windows Demo",
"description":"This demonstrates Inspected window API",
"devtools_page":"devtools.html",
"manifest_version":2,
"version":"2",
"permissions":["experimental"],
"background":{
"scripts" : ["background.js"]
}
}
devtools.html
A trivial HTML File
<html>
<head>
<script src="devtools.js"></script>
</head>
<body>
</body>
</html>
devtools.js
Used Long lived Communication API's
var port = chrome.extension.connect({
name: "Sample Communication"
});
port.postMessage("Request Tab Data");
port.onMessage.addListener(function (msg) {
console.log("Tab Data recieved is " + msg);
});
background.js
Responded to communication request and passed trivial information using tab API()'s
chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
chrome.tabs.query({
"status": "complete",
"currentWindow": true,
"active": true
}, function (tabs) {
port.postMessage(tabs[0].id);
});
console.log("Message recived is "+message);
});
});
Sample Output received for trivial devtools.js here
Let me know if you need more information
EDIT 1)
For your question 1)
Can you make you call(s) from browser extension HTML Page\Content Script so same session is shared, i have tried both the ways in a sample and it is working form me, instead of code in background page- make the code in content script or browser action HTML Page.
Let me know if you are still facing problems.
For your question 2)
The following code always fetches current window user is browsing
manifest.json
Ensure you have tabs permission in your manifest.
{
"name":"Inspected Windows Demo",
"description":"This demonstrates Inspected window API",
"manifest_version":2,
"version":"2",
"permissions":["tabs"],
"background":{
"scripts" : ["background.js"]
}
}
background.js
chrome.tabs.query({
"status": "complete", // Window load is completed
"currentWindow": true, // It is in current window
"active": true //Window user is browsing
}, function (tabs) {
for (tab in tabs) { // It returns array so used a loop to iterate over items
console.log(tabs[tab].id); // Catch tab id
}
});
Let me know if you are still unable to get tab id of current window.
I've been having a look at Chrome extensions and I'd like to create an extension that interacts with a web page using a sidebar. So, user clicks button to launch extension, and the current page splits, with the right hand portion displaying my extension. I tried below, but I see nothing (working or otherwise). I'm not overly surprised it's not working as I do not have a sidebar.html file for one thing. The reason I have that in the manifest is because I saw it in another post in this site. The suggestion there was to use the "sidebar" line in manifest.json, but "sidebar" isn't even mentioned in the documentation as being a valid part of the manifest syntax.
manifest.json:
{
"name": "Test 1",
"version": "1.0",
"description": "Test Extension 1",
"page_action": {
"default_icon": "icon.png",
"default_title": "Testing",
"default_popup": "popup.html"
},
"sidebar" : {},
"permissions": [
"experimental"
]
}
popup.html:
<script>
chrome.experimental.sidebar.show();
chrome.experimental.sidebar.expand();
chrome.experimental.sidebar.navigate({path: "sidebar.html"});
</script>
I've enabled 'experimental'.
Thanks for any help.
The problem is that you are opening, theoretically, the sidebar inside your popup, not in the current page.
You should add a content script in the page, with a function that opens the sidebar. So, in your popup you should just retrieve the current tab then call this function from it.
Also, as Boris Smus said in your question, sidebars will be discontinued in future versions. So I advice you to create your own sidebar frame via content scripts.
Update
To help you, I've made a simple extension that create a sidebar on current page.
#Curtis hosted my sample extension on Github, you can clone it here.
I was looking for a sidebar solution as well and ended up at
Implement chrome.sidebar API thread.
According to the Sidebar PRD, it is already possible to create sidebar by:
injecting a script into the page which edits the HTML of the page to display a sidebar by modifying the DOM to insert an iframe which
loads the contents of the sidebar from a remote server.
the injected script can edit the DOM directly to display a sidebar, the contents of which are passed via message.
However, there are many downsides (explained in the same document) with regard to:
Usability, Performance, Security, Privacy (Extension sniffing as well as Third party cookies) and Accessibility.
You can watch a demo of what they are preparing for future Sidebar Component.
It might help in shipping the feature quicker if you star the thread.
update
Per this comment, Chrome will not get a built-in sidebar component.