Hi I am new to chrome extension. I have build the basic chrome extension and I want to install it using inline installation. I followed the following link :
https://developer.chrome.com/webstore/inline_installation#already-installed
All is working properly. I want to check if extension is already installed or not so I referred the above document, whenever user install the extension at that time we are appending the new div using content script to my installation page on website. If that div is present it means the extension is already installed.
Following code is added in my content_script of chrome extension for appending the div whenever the extension is installed:
var isInstalledNode = document.createElement('div');
isInstalledNode.id = 'extension-is-installed';
document.body.appendChild(isInstalledNode);
Then my installation page can check for the presence of that DOM node, which signals that the extension is already installed:
if (document.getElementById('extension-is-installed')) {
document.getElementById('install-button').style.display = 'none';
}
But I am facing one problem, whenever I deleted my extension from settings/extensions, still the div is present on extension's installation page.
Is their any provision to remove the div when my extension is deleted or removed from browser?
You can't catch the uninstallation event for your own extension, though there is an management.onUninstalled, it is used for listening to other extensions/apps. See following answer for more details:
How to listen to uninstallation event in javascript from a chrome extension?
I just come up with two workarounds, one is creating another extension to listen to the uninstall of your first extension; another one is using runtime.setUninstallURL to visit a URL upon uninstallation, you can do something in server if you want.
BTW, for isInstalledNode, you needn't/shouldn't set the id, since there may be other elements in the webpage with the same id, you just need to create the node and use document.body.contains(isIntalledNode) to check if it exists.
Related
I have a Firefox OS app in which I have opened an web page via mozbrowser attribute.
<iframe id="inlineFrameExample"
mozbrowser=true
src="<some external link>"
</iframe>
How can we retrieve DOM content of the iframe?
You can retrieve DOM content via executeScript() method present in Browser API. It will run the script against the iframe and will allow you to do DOM computation tasks.
Note: The example mentioned in the document didn't worked but the syntax given below worked for me. The diff is is passed as string.
iframe.executeScript('put_your_script_here', {origin: 'domain_name'});
I'm working on a chrome extension which must get in touch with some apis.
The first version had this permission in the manifest :
"permissions": [ "API_1" ],
And I could contact this API:
var xhr = new XMLHttpRequest();
xhr.open('GET', "API_1" + someArguments, true);
xhr.onreadystatechange = function()
{
// ...
}
This version is already published, but now I need my extension to contact another API, so I'm using the same code with the new API:
var xhr = new XMLHttpRequest();
xhr.open('GET', "API_2" + someArguments, true);
xhr.onreadystatechange = function()
{
// ...
}
In this new version I don't have any warning or error whatever there is no permission for "API_2". If I add permission for API_2, installed extensions will be disabled on update. So my question is : Are permissions for API_1 and API_2 really mandatory?
If that's all you're using the API host permission for, it depends on exactly one thing: CORS policy of the remote server.
When making XHR requests, if the request is cross-domain (which, from an extension, always except for content scripts on that same domain) - Chrome will examine CORS headers in server's reply.
By default, if the server does not indicate anything, cross-domain requests are not allowed by the web security model. This is typical if you're requesting something that was never intended to be a public API. Listing the API match pattern in permissions overrides this.
However, for public API it is typical to include a permissive CORS header (after all, other web applications that may use this API cannot override the security model, only extensions can). In that case, the permission is not necessary.
Its hard to know without listing the API's, but google's documentation provides a simple way to check how new permissions will affect warnings:
If you'd like to see exactly which warnings your users will get, package your extension into a .crx file, and install it.
To see the warnings users will get when your extension is autoupdated, you can go to a little more trouble and set up an autoupdate server. To do this, first create an update manifest and point to it from your extension, using the "update_url" key (see Autoupdating). Next, package the extension into a new .crx file, and install the app from this .crx file. Now, change the extension's manifest to contain the new permissions, and repackage the extension. Finally, update the extension (and all other extensions that have outstanding updates) by clicking the chrome://extensions page's Update extensions now button.
Basically, create two test extensions, one being your original and another being your updated. Follow this process to go through a simulated update, and you will see what warnings you get, if any.
If you leave out API_2 permissions in the update and everything is fine, then its permissions are not mandatory to include in the manifest.
Source
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..