I am trying to use chrome.storage API. However, when I perform a console.log of chrome.storage in my browsers console, both my localhost and built extension returns undefined.
There is an extension which I know makes use of chrome.storage API and when I do the same it returns an object with correct information (looks like storage is the only thing that is different compared with both extensions). I have implemented chrome.storage.sync.set and chrome.storage.sync.get but I experience issues relating to chrome.storage being undefined.
My manifest.json file looks like below
{
"name": "Name of application",
"version": "1.0.0",
"manifest_version": 2,
"description": "A plain text description",
"icons": {
"32": "logo_32.png",
"64": "logo_64.png",
"128": "logo_128.png",
"256": "logo_256.png"
},
"browser_action": {
"default_icon": "logo_32.png"
},
"author": "Author name",
"chrome_url_overrides": {
"newtab": "index.html"
},
"permissions": [
"storage",
"http://localhost/*"
]
}
When I console.log just chrome (console.log(chrome)) I get returned object, which is different from the build extension.
I have searched around and can not find a solution. Most answers I have found simply state checking the permissions in the manifest file.
As I created the extension with create-react-app, is there any other configuration I need to change in order to be able to use chrome.storage?
Update
So instead of reloading extension from extensions, I deleted the extension and then added the extension back. This allows me to access chrome.storage when built. However, for my localhost, I still get chrome.storage is undefined. Is there a way to fix this?
Related
We have a react app deployed in AWS which allows us to store specific device information, and we also have created an ec2 instance which takes that data and allows us to configure the device it was based on. We are trying to create a way to run the playbook within the EC2 using a button on the web app, however currently drawing a blank on how to do so.
We used to use a application named Morpheus but ran into all sorts of issues. We are now trying to keep everything from within AWS.
Any suggestions are helpful.
So I have tried to make use of the SSM Document and it has begun to confuse me. I attempted to make use of the script to try navigate to my folder and then run the playbook. However my method is not working at all.
{
"schemaVersion": "2.2",
"description": "Command Document Example JSON Template",
"parameters": {
"Message": {
"type": "String",
"description": "Example",
"default": "Hello World"
}
},
"mainSteps": [
{
"action": "aws:runPowerShellScript",
"name": "navigate to file",
"inputs": {
"runCommand": [ "cd /echo_configure/Config" ]
}
},
{
"action": "aws:runPowerShellScript",
"name": "execute file",
"inputs": {
"runCommand": [ "ansible-playbook apply.yml" ]
}
}
]
}
Could I get some help to push me in the right direction
I am having issues after deploying React application using AWS amplify.
Couple of issues here:
I see that there was a reference to %PUBLIC_URL% in the public/index.html. In the documentation, it says %PUBLIC_URL% will get replaced with the URL of the public folder during the build. It doesnt seem to be happening. Not sure what build means here.
I replaced %PUBLIC_URL% with /. I seem to be getting Manifest: Line: 1, column: 1, Syntax error.
I tried adding crossorigin="use-credentials" as suggested in one of the forums, but that doesnt seem to have any effect.
I have sifted through reference to this error and none seem to be pointing to the solution.
Appreciate any pointers.
S
I ran into the same issue. This worked for me:
Open Amplify console
'App settings' > 'Rewrites and redirects', click 'edit'
click 'Open text editor'
paste this:
[
{"source": "/manifest.json",
"target": "/manifest.json",
"status": "200",
"condition": null
},
{
"source": "</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>",
"target": "/index.html",
"status": "200",
"condition": null
}
]
Note: the redirect of the manifest MUST be before the index.html
I have hosted my react app on AWS Amplify. On trying to access a protected route of the application I am getting the following error on screen
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>3C8377104116CA48</RequestId>
<HostId>nL3bDs+kXEWE8uBFPTLkFLpRg6CCmKfejftWs5wmTWYO6K6WDzpwsDXJCFTK0EFhjJdaHECfuos=</HostId>
</Error>
How do I resolve this?
I found a solution myself from one of AWS forum where a user was kind to share the solution he got from AWS support. I guess AWS does not want the world to know the solutions to the problems it creates so as to sell the support package. Anyway, here is the solution:
In AWS Amplify console in 'Rewrites and Redirects' section add this record
Source Address: </^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
Target: /index.html
Type: 200 (Rewrite)
That is it. It magically gets resolved. I don't know why this has to be done or what went wrong in the first place, but taking this action resolves it.
Vinit Khandelwal answer is correct but if anyone is looking for the documentation regarding this issue, here it is. It's a simple configuration add in the Amplify console. Works like a charm!
https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
When you create a project through the amplify console it automatically creates rewrite rules. When you create a project from the CLI it does not create rewrite rules.
You can copy the re-write rules Amplify uses on a project created from the console to the rewrite rules for your project.
I've included the rewrite rules below.
[
{
"source": "/<*>",
"target": "/index.html",
"status": "404-200",
"condition": null
},
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
]
This is my first time deploying a react app on AWS Amplify. The app works fine as a SPA, the only problem is re-directions.
For example; when a user completely signs up and gets a link to verify email, clicking on the link redirects me to mydomain.com/index.html.
Also when i try navigating to mydomain.com/sign-in (which should lead me to sign in page), it redirects me to mydomain.com/index.html.
How can i resolve this?
Try going to App settings->Rewrites and redirects
Add in a new rule
Source should be </^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
Target address index.html
Type 200 (Rewrite)
Here's an example of what the end result should look like.
If that doesn't work, try this one
</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
You need to accept and route all files. When react builds, it runs off the index file, but react-router manipulates the path as SPA requirements have it.
Paste this into your rewrites and redirects. This will generally work if you are running a standard react router webapp.
[
{
"source": "</^((?!\\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>",
"target": "/index.html",
"status": "200",
"condition": null
},
{
"source": "/<*>",
"target": "/",
"status": "404",
"condition": null
}
]
I try to connect to my localhost served Google Endpoints API from Chrome Extension. I managed to OAuth to Google Contact API other way than throught their JS Client but using https://apis.google.com/js/client.js?onload=loadF never call callback function. When I tried to call it manually, I get error in console:
Refused to execute inline event handler because it violates the following Content Security Policy directive . It seems that background worker has not enough permission to load API but there is no info about it from console.
My JS Code
var apiRoot='//localhost:8080/_ah/api';
var loadF = function() {
console.log("api init");
gapi.client.load('my_api', 'v1', function(){
console.log("callback");
}, apiRoot);
}
My Manifest:
{
"name": "Linkeer",
"version": "1.0",
"description": "Linkeer ",
"manifest_version": 2,
"icons": {
"128": "icon128.png"
},
"browser_action": {
"default_title": "OAuth 2.0",
"default_icon": "icon128.png",
"default_popup": "options.html"
},
"options_page": "options.html",
"content_scripts": [
{
"matches": ["http://www.google.com/robots.txt*"],
"js": ["oauth2/oauth2_inject.js"],
"run_at": "document_start"
}
],
"permissions": [
"https://accounts.google.com/o/oauth2/token",
"http://localhost:8080/_ah/api"
],
"web_accessible_resources" : [
"oauth2/oauth2.html"
],
"content_security_policy": "script-src 'self' http://localhost https://apis.google.com https://www.googleapis.com; object-src 'self'"
}
For authentication I would suggest to use the Chrome Identity API which allows a much cleaner and easier implementation than the OAuth2 for Extensions library you are using at the moment.
I haven't found a good way to get the JS client library working inside of a Chrome extension yet (haven't tried in a while though). There's an open feature request for that though.
Directly creating the API requests as XMLHttpRequest should be easy enough though without using the library.
Today, I don't believe it's possible. There are at least two issues:
Security policies for script inclusion are a significant blocker.
For applications that use OAuth, the callbacks in the OAuth flow have never seemed to work properly. The popup appears, but never passes credentials back to the extension.
You will probably have to update your CSP with 'unsafe-inline' which does reduce security but is probably required by the Google JS.
"script-src 'self' http://localhost https://apis.google.com https://www.googleapis.com 'unsafe-inline'; object-src 'self'"