What is wrong with this chrome extension? - google-chrome-extension

I have downloaded this chrome extension https://github.com/jeffreyiacono/penalty-blox
When I load it via load unpacked extension it gives me this error
1.manifest_version key must be present and set to 2
I solved it via adding manifest_version in manifest.json
2.After this when I reload it,The icon is coming but when I click on it nothing is working(looks like background.html is not working)
What changes should I do so that it workes perfectly?

Related

neutralinojs - how to load browser extension when starting chrome mode?

I have a web page and custom extension that goes with it. The extension is a normal browser extension - not a neutralinojs extension. I can load my extension from the command line (without neutrinojs) with chrome and msedge using the --load-extension=<path-to-extension> option. Extension and page work fine.
I'm having difficulty figuring out how to achieve the same thing with neutralinojs.
I've tried passing the option via the neutralino.config.json config file [example below] and starting the page with neu run. The page loads, but the extension isn't loaded. Near the top of the JSON file, I specify "chrome" as the mode. I'm certain it is starting chrome.
"chrome": {
"width": 500,
"height": 700,
"args": "--load-extension=C:\\project\\my-extension",
"nativeBlockList": [
"filesystem.*",
"os.*"
]
}
I also tried a more direct approach with neutralino-win_x64.exe --chrome-args="--load-extension=C:\project\my-extension". It seems the JSON file isn't read in when I try it this way, and it's not clear to me how to format the other options that need to be passed to it.
How should I go about getting my custom extension loaded when starting in chrome mode? And could I also get neutralinojs to start with msedge instead of chrome with additional chrome options passed to it.

How to Edit chrome extension contentscript Source Files Directly in Chrome

I know that we can edit source directly in chrome,
and we can edit the extension background.js in chrome,
just like: https://www.sitepoint.com/edit-source-files-in-chrome/
but how can I edit the contentscript in chrome devtools?
I have set source->filesystem, but it does not seem to work.

After deletion of chrome extension remove some html elements from website

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.

Error when installing Hosted Chrome Extension

I built a chrome extension. I don't want to host it (yet) in the chrome webstore. I want to self host it. I have packaged the .crx, and deployed it to my localhost. Here is the code I use to serve it:
app.get('/myext.crx', function(req, res){
var file = __dirname + '/public/myext.crx';
res.download(file);
});
Then I have an anchor tag that points to the file:
Install <strong>myExt for Chrome</strong>
When it downloads, it has the correct content-type header (per the instructions http://developer.chrome.com/extensions/hosting.html). Here is the info from the Network tab in Chrome Devtools when I click the anchor:
**Response Headers**
Connection:keep-alive
Content-Description:File Transfer
Content-disposition:attachment; filename=myext.crx
Content-type:application/x-chrome-extension
Date:Sat, 14 Dec 2013 07:09:46 GMT
Transfer-Encoding:chunked
X-Powered-By:Express
It all looks good, but Chrome still shows me the yellow banner error saying "Apps, extensions, and user scripts cannot be added from this website".
Am I missing a setting in the manifest? Can someone tell me what the issue is? Does it have anything to do with the fact that I am serving on localhost and the "homepage_url" and the "update_url" both point to my actual domain name?
Anyone, please.
UPDATE
It downloads the file, but gives me the aforementioned error. If I open Tools > Extensions and then drag the file from the bottom of Chrome onto the Extensions page, it won't install it. Nothing happens. HOWEVER, if I open a Finder window and drag it from the Finder window onto Tools > Extensions page, it installs fine.
Not sure if this info helps or not.
Chrome is starting to block extension installs that are not from the Chrome Web Store. If you don't want an extension to be fully published in the CWS, you can limit the audience with the publish to test accounts or accessible by URL only features.

How to inject javascript into Chrome DevTools itself

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

Resources