Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
ReferenceError: browser is not defined
Cannot find WebExtension APIs on page via console.
In background script all APIs working fine.
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs
How to send/receive message via WebExtension APIs on page (Firefox 51).
Here is an example that print a notification when you click on the button (it works for me).
Do not forget to declare the permissions for your needs in the manifest.
Disclaimer: it seems that Firefox throw an error for browser variable, but it works.
manifest.json
{
"manifest_version": 2,
"name": "webextension-example",
"version": "0.1",
"description": "An example.",
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["script.js"]
}
],
"permissions": [
"notifications",
"activeTab"
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<button id="pony">Notify</button>
<script src="script.js"></script>
</body>
</html>
script.js
window.addEventListener("click", notifyExtension)
function notifyExtension(e) {
if (e.target.id !== 'pony') {
return
}
browser.runtime.sendMessage('FooBar')
}
background.js
browser.runtime.onMessage.addListener(notify)
function notify(message) {
browser.notifications.create({
"type": "basic",
"title": "You clicked a link!",
"message": message
})
}
Related
I am trying to use navigator.langauge in react and I want to show greeting message in their local language by default and greetings should be according to hour. Can we use navigator.lang to do so?
I have tired react i18 but it doesn't work in chrome extension
This is a multilingual sample.
manifest.json
{
"name": "__MSG_extName__",
"version": "1.0",
"manifest_version": 3,
"default_locale": "en",
"action": {
"default_popup": "popup.html"
}
}
popup.html
<html>
<body style="min-width:400px">
<div id="hello"></div>
<script src="popup.js"></script>
</body>
</html>
popup.js
const hello = chrome.i18n.getMessage("hello");
document.getElementById("hello").innerText = hello;
_locales\en\messages.json
{
"extName": {
"message": "Hello."
},
"hello": {
"message": "Hello."
}
}
_locales\ja\messages.json
{
"extName": {
"message": "こんにちは。"
},
"hello": {
"message": "こんにちは。"
}
}
navigator.language is going to give you a string representing the language and dialect (example: en-US) that the user's browser is set to. If you want to just grab the language part (not the dialect), you could do this:
navigator.language.split('-').shift()
And it should give you just give you the "en" part.
I have read the other posts on this matter and have tried to use the answers provided and none of them worked. I am hoping that someone can help me with this issue. I am building an application using React and AWS Lambdas. I do not have a public folder to place the manifest file into. I have placed the file in the templates folder that stores my html files as well as the root of the project and I am still receiving the error that it cannot be found. I am also not sure why it is complaining about my syntax. I ran it through JSONLint just to make sure that it was indeed valid and no errors were returned. Below is my manifest.json file:
{
"short_name": "bat",
"name": "bat",
"description": "bat",
"icons": [{
"src": "/images/image.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/image.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [{
"name": "bat",
"short_name": "bat",
"description": "bat",
"url": "./?source=pwa",
"icons": [{
"src": "/images/image.png",
"sizes": "192x192"
}]
},
{
"name": "bat",
"short_name": "bat",
"description": "bat espanol",
"url": "./es?source=pwa",
"icons": [{
"src": "/images/image.png",
"sizes": "192x192"
}]
}
]
}
If there is anything else you might need please let me know.
Update
I am still having issues with my project seeing that there is a manifest.json file. The React application was not built using create-react-app. It was built from scratch. I have been brought in to help maintain and add new features. One of these new features is the manifest.json file to convert the website to a PWA. Therefore I have added the <link rel="manifest" href="/manifest.json" /> to both of my html files as there are only two html files in the whole project. I have also created the manifest.json file in the root directory per this article and still no luck with the manifest.json file being read properly as I still receive the 404 (not found) error as well as the Line 1, column 1 Syntax Error.
Just adding the manifest file in /public is not sufficient.
You will also have to add manifest in the index.html head tag.
<link rel="manifest" href="public/manifest.json" />
Try this out.
Add the entire path in the href manifest :
<link rel="manifest" href="your_template_folder/manifest.json" />
Also I didnt have a public folder, but I use manifest .json in another folder for the PWA stuffs and using it this way works.
I am trying to change the header / search bar menu colour on mobiles for a website with the below code within the <head> tags.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#313131">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#00f800">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#00f800">
This however is not working for me and so have tried also with the mobile manifest json file placing this in the header:
<link rel="manifest" href="manifest.json" />
Where manifest.json is like below:
{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}
This has also not worked so have checked over stackoverflow and noticed that not having a valid ssl certificate may also be a cause and so added one to the site however am still getting the same issue.
The colour does change slightly to a darker grey so does seem to do something however not the colour I am after. I have used a range of hex codes from examples on here as well as from sites that I can see working on the same mobile I am testing on so do not believe it is a problem with the mobile or the colours being used.
I'm wondering if there are any other causes for this now working?
First of all let me thank you for all the great job you guys are doing here.
You helped me a lot when having different bugs.
But this time nothing seems to fix my issues.
I'm trying to consume a JSON with Angular JS which I'm generating using Spring Boot.
The JSON looks like this:
{
"id": 65,
"url": "http://localhost:9000/",
"key": "com.SocGen:Test",
"name": "Test",
"lname": "Test",
"scope": "PRJ",
"qualifier": "TRK",
"uuid": "AVMtRdoEBufaCmDWZmPf",
"description": "Test",
"version": "0.0.1-SNAPSHOT",
"date": "2016-03-11T11:57:29+0200",
"creationDate": "2016-02-29T15:44:25+0200",
"allMsr": [
{
"id": 2855,
"key": "files",
"val": "10.0",
"frmt_val": "10",
"project": null,
"date": "2016-03-11T11:57:29+0200"
},
{
"id": 2856,
"key": "duplicated_blocks",
"val": "0.0",
"frmt_val": "0",
"project": null,
"date": "2016-03-11T11:57:29+0200"
}
]
}
My index.html looks like this:
<!doctype html>
<html>
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body ng-app>
<table ng-controller="Hello">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{project.id}}</td>
<td>{{project.name}}</td>
<td>{{project.url}}</td>
</tr>
</tbody>
</table>
</body>
</html>
And hello.js:
function Hello($scope, $http) {
$http.get('http://localhost:8080/project/65').
success(function(data) {
$scope.project = data;
});
}
I spent like 2 hours trying to find a solution but no luck.
I know that this question has answers already but I tried alot of them and none of them seem to work for me.
So, what's the mistake here?
Thank you!
The problem was that I was running it locally and my browser had CORS (cross origin resource sharing) blocked.
The way to solving it was to install a little extension for chrome. Just search for it, and you'll find it.
As you said CORS blocked your request.
How can it be a solution to your problem to just add a chrome extension. It won't work on any other browser. Can you just ask the user to install a chrome extension to run your application.
Permanent solution would be adding the CORS header from the server side.
Access-Control-Allow-Origin:*
Here are some links to go through your problem:
Link1
Link2
In the below code,
/* app.js*/
var app = angular.module('Sample', []);
/* Controller.js*/
app.controller('Controller', function($scope, $http){
$http.get('result.json').
then(function(data) {$scope.tabular_data = data;} , function(data) {console.log("My error: " + data)} );
});
[{
"name": "Brokerage Account 3",
"marketValue": "1999990",
"cash": "1995826",
"legend": "orange"
}, {
"name": "Account 3",
"marketValue": "1949990",
"cash": "1695856",
"legend": "darkorange"
}]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample app</title>
<link rel="stylesheet" href="app_style.css">
<!-- Libs -->
<script src="angular.js"></script>
<!-- Application -->
<script src="app.js"></script>
<script src="Controller.js"></script>
</head>
<body ng-app="Sample">
.....
<!-- Content -->
<div id="content" ng-controller="Controller"></div>
</body>
controller code could not read the json file.
online tool verifies that json file is a valid file
Dev tool console does not show any error.
How do I resolve this error?
I guess there is an issue with your json. Try without ending comma ,.
[{
"name": "Name1",
"Value": "1000"
}, {
"name": "Name2",
"Value": "1949990"
}]
Whenever using JSON always validate them at http://jsonlint.com/
Demo Plunkr
Seems line you missed a closing bracket at the end. Try this:
app.controller('Controller', function($scope, $http) {
$http.get('result.json')
.then(
function(data) {
//$scope.tabular_data = data;
console.log("Success!");
},
function(data) {
console.log("My error: " + data)
}
);
});