I'm encountering the Manifest file is missing or unreadable error when trying to load my unpacked Chrome extension. I'm building the extension as a react app, so the file structure looks like this:
I understand that the manifest.json needs to be in the root folder, not in public the way react usually lays it out. When I move it to the root however, it breaks the connection to app.js and my popup only loads index.html with none of the javascript connected.
This is how my manifest is laid out:
{
"manifest_version": 2,
"name": "My Extension",
"description": "This extension is a starting point to create a real Chrome extension",
"version": "0.0.1",
"browser_action": {
"default_popup": "index.html",
"default_title": "Open the popup"
},
"icons": {
"16": "/public/images/get_started16.png",
"48": "/public/images/get_started48.png",
"128": "/public/images/get_started128.png"
},
"permissions": [
]
}
Not sure if you've figured this one out already since its been awhile since someone answered, but once you are done, do npm run build. This should create your "build" which will have your manifest file, after that, load unpackaged "build" folder.
Hope this helps.
In Order to solve this issue :- Click on
Pack extension give a complete path Extension root directory click on Pack extension
Now click on Load extension.
you can see in your current folder two extra file generated on is .pem and .ctx file.
its working now
Related
I'm using web-ext to sign an addon but I'm always having the same error message:
A content script defined in the manifest could not be found.
Error: Content script defined in the manifest could not be found at "node_modules/jquery/dist/jquery.min.js".
I already tried to change the path in the manifest.json file with ./, like:
"content_scripts": [
{
"matches": ["*://*/*"],
"js": [
"./node_modules/jquery/dist/jquery.min.js"
]
}
]
But the message keeps appearing, and it ignores the ./ since the message keeps complaining about could not be found at "node_modules/....
Not sure if there is a way to clear the web-ext cache. Or what I'm doing wrong to include such scripts. It seems the problem is with node_modules scripts.
Thanks in advance.
How can I inline _next/* files in out/index.html?
How can I whitelist _next/ directory in manifest.json?
I followed the instructions for exporting a static app, and used a simple manifest.
** manifest.json **
{
"manifest_version": 2,
"name": "E1-static-export",
"version": "0.1",
"description": "Demo static export with inline / CSP hashes",
"browser_action": {
"default_popup": "out/index.html"
}
}
yarn build && yarn export from /E1-static-export
load unpacked extension in chrome://extensions
right click browser icon Inspect Popup
Filed an issue because I've spend ~5 hours researching!
Thanks
TLDR; I'm working on a better solution, but I discovered that Chrome doesn't follow underscores in the directory path.
My error had nothing to do with CSP, I merely had to rename _next to Znext and rename all occurrences within that directory. Following the static export tutorial, I ended up with a navigable "default_popup" palette with flawless client-side routing and my required package (crypto).
No need for "web_accessible_resources" or "content_security_policy" changes.
I am trying to add accessibility to a large web application built with react and webpack. This requires going back to the source files from the app. Is there a way to see which file the code originally came from? Inspect element and view source are nice but I can't find the path to the source file where the code was generated from. Is there a way to do this in dev tools (chrome or firefox developer edition) or am I stuck with searching my entire project src folder for code that will point me to the file? It is a single page application so it is not as easy as checking the url.
EDIT: we also use babel
EDIT2: changed name to clarify I am looking for the original source code path to the file
for that you have to use .babelrc and add this line into file
"sourceMaps": true
after adding this in chrome > source tab it will show all the files with same name as code and the code also will be in es6 or above (same as what you write).
example config:
{
"presets": ["es2015"],
"plugins": [
"transform-object-rest-spread",
[
"import",
{
"libraryName": "lib",
"libraryDirectory": "./src"
}
],
["module-resolver", {
"root": ["./src"],
"alias": {
"database": "./src/database",
"localization": "./localization",
"utils": "./utils"
}
}]
],
"sourceMaps": true
}
Let me know if you have any other issue still.
For getting file path you can right click on the file title tab and click on "Reveal in sidetab"
if you want to open file just press cmd + p and search for file name there you will see 2 files with same name. you have to open one witch dont have webpack-internal prefixed.
Also you can open side tab and there you will find your same folder structure as you do have in your project. in webpack dir.
I have been trying to use Google API in my 2.X CakePHP project for a couple of days now, and I seem not to be able to use it. The method I used to load it into my test server was installing it in local with composer (I changed my composer.json to include the library which looks like this).
{
"name": "cakephp/cakephp",
"description": "The CakePHP framework",
"type": "library",
"keywords": ["framework"],
"homepage": "http://cakephp.org",
"license": "MIT",
"authors": [
{
"name": "CakePHP Community",
"homepage": "https://github.com/cakephp/cakephp/graphs /contributors"
}
],
"support": {
"issues": "https://github.com/cakephp/cakephp/issues",
"forum": "http://stackoverflow.com/tags/cakephp",
"irc": "irc://irc.freenode.org/cakephp",
"source": "https://github.com/cakephp/cakephp"
},
"require": {
"php": ">=5.2.8",
"ext-mcrypt": "*",
"google/apiclient": "^2.0"
},
"require-dev": {
"phpunit/phpunit": "3.7.*",
"cakephp/debug_kit" : "2.2.*"
},
"bin": [
"lib/Cake/Console/cake"
]
}
After that I uploaded my whole project using SFTP to my server, and even though I am running a simple script it would show the error "Google_Client class not found". My attemp looks like this:
dd(new Google_Client());
exit();
My output is as follows:
'Class 'Google_Client' not found'
'/var/www/html/app/Controller/AgendaEventosController.php'
I have tried with composer dumpautoload and reuploading the composer autoload to my server via ftp and also tried to import the autoload like this:
App::import("Vendor/Google/apiclient/src/Google","autoload.php"
Can anyone point a better approach to my problem? (also, for what it may be worth, my server's php version is 5.5.9 and my local enviroment -which I used to install the dependency- is 7.2, but I don't think this may be an issue)
As an aditional note: the README file states:
Finally, be sure to include the autoloader:
```php
require_once '/path/to/your-project/vendor/autoload.php';
It may also be worth mentioning I ran the composer install command in the root folder (not in the app folder).
But I am confused on where I should add this line, or even if I should add it, since CakePHP autoloader fires automatically (as fas as I know).
How added my-custom.css file in app.json or bootstrao.json files
app,json
{
"name": "My App",
"requires": [
],
"id": "166372b1-e416-4921-8ef2-2495765b9d76"
}
bootstrap.json
/**
* This file is generated by Sencha Cmd and should NOT be edited. It is a
* combination of content from app.json, and all required package's package.json
* files. Customizations should be placed in app.json.
*/
{"id":"166372b1-e416-4921-8ef2-2495765b9d76","js":[],"css":[]}
I think you're asking about adding CSS files to your application's app.json file. Basically, you need to add the following section to app.json then run sencha app build (which will update bootstrap.json for you).
"css": [
{
"path": "resources/css/my-styles.css"
}
],
However, a project initialized with Sencha Cmd would've had this section with helpful comments. Take a few minutes to become more familiar with Sencha Cmd and how you can use that to manage your project's files and build process:
http://docs.sencha.com/cmd/4.0.0/#!/guide/command_app_ext42