I'm currently developing a wallet extension using ReactJS w/bootstrap, I'm trying to build the extension and test it on google chrome, but nothing is rendering.
I thought It might be because I'm using bootstrap and I must add some plugins or script in manifest.json. But I don't have any idea how to.
This is my manifest.json:
{
"manifest_version": 3,
"name": "Wallet",
"author": "whxy",
"version": "1.0.1",
"description": "E-Wallet",
"action":{
"default_title": "E-Wallet",
"default_popup": "index.html",
"default_icon":{
"16":"logo192.png",
"128":"logo192.png"
}
},
"permissions": ["storage"]
}
Related
I want to make a chrome extension using react. The problem I face I can't load the index.html file that is inside the public directory. My goal is when I click my chrome extension then the index.html file append inside the existing web page
This is my manifest.json code :
{
"name": "Demo Exe",
"description": "The demo chrome extension",
"version": "1.0",
"manifest_version": 2,
"permission": ["active"],
"permissions": ["storage", "activeTab", "scripting"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["./index.js"]
}
]
}
I'm trying to use Chrome storage API to store access token after the user logs in the extension. However, when I try to use chrome.storage.local it throws error which says local was called on undefined.
I've added /* global chrome */ on the top of JS file in which I want to access the storage API. But the storage is still is not accessible.
As suggested in the documentation I've the storage permission added. Also, I've already tried multiple times to reload/reinstall the extension in chrome but the problem persists.
Following is my manifest file.
{
"manifest_version": 2,
"name": "My Extension",
"description": "This is My Extension",
"version": "1.0.0",
"homepage_url": "https://stylestash.dev",
"icons": {
"16": "ss-logo.png",
"48": "ss-logo.png",
"128": "ss-logo.png"
},
"browser_action": {
"default_icon": "ss-logo.png",
"default_title": "My Extension"
},
"background": {
"scripts": ["./jquery.js", "background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"all_frames": false,
"js": ["./content.js", "./jquery.js"],
"run_at": "document_end"
}
],
"permissions": ["storage", "tabs", "activeTab", "<all_urls>"],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"web_accessible_resources": ["index.html", "/static/*"]
}
Any help would be very appreciated. Thanks!
I have the following manifest.json:
{
"manifest_version": 2,
"name": "Application Name",
"version": "1.0",
"description": "blah blah blah",
"icons": {
"48": "icons/icon-48.png",
"96": "icons/icon-96.png"
},
"permissions": [
"activeTab",
"tabs",
"history",
"storage"
],
"browser_action": {
"default_icon": "icons/icon-32.png",
"default_title": "Title",
"default_popup": "popup/popup.html"
},
"content_scripts": [{
"matches": [
"<all_urls>"
],
"js": [
"content_scripts/script1.js",
"content_scripts/script2.js"
]
}]
}
I have access to the the storage API (browser.storage is defined) in my content scripts, but both the history and tabs APIs (browser.tabs and browser.history) are undefined. Am I missing something in the manifest to get access to these permissions?
One of the few WebExtensions APIs that is available for content scripts is browser.storage. Most WebExtensions APIs can only be accessed when using a background script. Using message passing you can still call those APIs (what you do is basically calling a function in the background script from within the content script). Please see the example on this page: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/sendMessage
See also Firefox WebExtention API: TypeError: browser.browserAction is undefined for a similar problem.
I need to use eval in my chrome app. is there any way to do this? It just needs to process a mathematical expression input.
I have tried adding unsafe-eval to the manifest, but it gives me an error a loading the app. Here is the manifest.
{
"name": "Calculator",
"description": "A calculator for Chrome.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": {"128": "calculator-128.png"}
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
Read the Chrome documentation "Using eval in Chrome Extensions. Safely.". It answers this common question.
I try to install the plugin CakePHP-CSV using Composer. I forked it from ProLoser/CakePHP-CSV.
I don't want to install it in Vendor, but in Plugin folder and with the name of Csv and not the default one that is the plugin name. I tried to use the extra in composer.json but what ever I tried it installs it in Vendor folder of the project.
"repositories": [
{
"type": "package",
"package": {
"name": "CakePHP-CSV/Csv",
"version": "dev-master",
"source": {
"url": "https://github.com/sela/CakePHP-CSV",
"type": "git",
"reference": "origin/master"
}
}
}
],
"require": {
"CakePHP-CSV/Csv": "dev-master",
},
"config": {
"vendor-dir": "Vendor"
},
"extra": {
"installer-paths": {
"Plugin/Cvs": ["Plugin/cvs"]
}
}
You need to make your package depend on composer/installers.
From Composer's documentation:
If you are a package author and want your package installed to a custom directory, simply require composer/installers and set the appropriate type. This is common if your package is intended for a specific framework such as CakePHP, Drupal or WordPress. Here is an example composer.json file for a WordPress theme:
{
"name": "you/themename",
"type": "wordpress-theme",
"require": {
"composer/installers": "~1.0"
}
}
And later (I've added italics to the important part):
As a package consumer you can set or override the install path for a package that requires composer/installers by configuring the installer-paths extra. A useful example would be for a Drupal multisite setup where the package should be installed into your sites subdirectory.
Note that extra is simply a place to put arbitrary data:
Arbitrary extra data for consumption by scripts.
This can be virtually anything. To access it from within a script event handler, you can do:
$extra = $event->getComposer()->getPackage()->getExtra();
The second part is very important; something has to retrieve the extra data and do something with it. In this instance that something is composer/installers.
I needed more space for the code so I answer myself. The following code worked and I didn't need to fork the code.
"repositories": [
{
"type": "package",
"package": {
"name": "ProLoser/CakePHP-CSV",
"version": "1.0",
"type": "cakephp-plugin",
"dist": {
"url": "https://github.com/ProLoser/CakePHP-CSV/archive/master.zip",
"type": "zip"
}
}
}
],
"require": {
"composer/installers": "~1.0.0",
"ProLoser/CakePHP-CSV": "1.*"
},
"config": {
"vendor-dir": "Vendor"
}