I'm developing an extension that I need to play an audio from the remote server and I have another server to fetch other information.
I put the following line in manifest.json:
"content_security_policy": "default-src 'self' https://firstserver.com https://serverwithaudio.com;"
I also tried
"content_security_policy": "default-src 'self' https://firstserver.com; media-src https://serverwithaudio.com;"
but none of them worked and I still get this error:
Content Security Policy: The page’s settings blocked the loading of a
resource at https://serverwithaudio.com/media/audio1.mp3
(“default-src”).
Is it possible to play a remote audio from two different sources or I missed something in my manifest.json
I solved the issue.
First of all if you put content_security_policy in your manifest.json, you won't be able to submit it in Mozilla extension directory.
Second, I moved the audio file to the same server as I get the information. then play the audio from background script.
when I click on the button on content script I send a message to background script with the audio url:
let audioUrl = "https://example.com/media/audio.mp3";
chrome.runtime.sendMessage({audio: audioUrl});
And in background script:
chrome.runtime.onMessage.addListener(function(req, sender, sendResponse){
if (req.audio) {
(new Audio(req.audio)).play();
}
return true;
});
and bear in mind that you still need to mention your host in permission directive.
"permissions": [
"*://example.com/"
]
Related
We want to serve a Docusaurus-build with Electron.
For this we are using a custom protocol that just serves the files to the Electron-Browser.
The Problem is, the Javascript that is running in the static-html build of the Docusaurus app just wont accept the url (at least that is what we think)
If we serve "doc://doc/docs/intro/index.html" it pops up for a second and afterwards the "Page Not Found"-page is shown - because the javascript does that.
Our url is "doc://doc" and our baseUrl is "/" and we can not figure out how to stop the Javascript from chaning the currently loaded page to the Page not found one.
(We disabled the Javascript and if it is disabled that error does not appear)
The problem was Electron...
You have to give the custom protocol privledge with this:
protocol.registerSchemesAsPrivileged([
{
scheme: 'doc',
privileges: { secure: true, standard: true },
},
]);
So it has actually nothing to do with Docusaurus.
I want to create PWA's service worker file by using workbox.
According to workbox document, precaching setting of workbox is something like this:
service-worker.js
workbox.precaching.precacheAndRoute([
'/styles/example.ac29.css',
{ url: '/index.html', revision: 'abcd1234' },
// ... other entries ...
]);
But what is the actual meaning of /index.html or /styles/example.ac29.css?
It is server root? or, the root of PWA's scope?
For example, if service-worker.js is served in https://example.com/hoge/fuga/service-worker.js, and manifest.json is also served in https://example.com/hoge/fuga/manifest.json with content:
{
"name": "Great PWA site",
"background_color": "#f6f0d3",
"icons": [...],
"start_url": "https://example.com/hoge/fuga/",
"scope":"/hoge/fuga/",
"display": "standalone"
}
In such case, /index.html in workbox setting means https://example.com/index.html? Or, https://example.com/hoge/fuga/index.html?
Within Workbox's precache manifest, /index.html is resolved to a full URL using the server root as the base. It does not user the service worker scope as the base. (After Googling, I guess it's technically called a "root-relative" URL, though I've never really used that phrase before.)
If you had a relative URL like ./index.html, it would be resolved to a full URL using the location of the service worker script as the base.
In general, if you're curious as to what a URL will resolve to, you can run the following from the ServiceWorkerGlobalScope to see:
(new URL('some-URL.html', self.location.href)).href
The easiest way to do this is to open up Chrome's DevTools while on a page you're curious about that has a service worker, go to the Console panel, and choose the service worker's scope in the popup menu, and then enter the code above.
I just completed the YouTube API tutorials on Codecademy and successfully managed to display results relating to a given 'q' value in the console window provided using the following code:
// Helper function to display JavaScript value on HTML page.
function showResponse(response) {
var responseString = JSON.stringify(response, '', 2);
document.getElementById('response').innerHTML += responseString;
}
// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}
// Called automatically when YouTube API interface is loaded (see line 9).
function onYouTubeApiLoad() {
// This API key is intended for use only in this lesson.
// See http://goo.gl/PdPA1 to get a key for your own applications.
gapi.client.setApiKey('AIzaSyCR5In4DZaTP6IEZQ0r1JceuvluJRzQNLE');
search();
}
function search() {
// Use the JavaScript client library to create a search.list() API call.
var request = gapi.client.youtube.search.list({
part: 'snippet',
q: "Hello",
});
// Send the request to the API server,
// and invoke onSearchRepsonse() with the response.
request.execute(onSearchResponse);
}
// Called automatically with the response of the YouTube API request.
function onSearchResponse(response) {
showResponse(response);
}
and:
<!DOCTYPE html>
<html>
<head>
<script src="search.js" type="text/javascript"></script>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
</head>
<body>
<pre id="response"></pre>
</body>
</html>
The problem I am having now is that I have taken this code and put it into my own local files with the intention of furthering my understanding and manipulating it work in a way which suits me, however it just returns a blank page. I assume that it works on Codecademy because they use a particular environment and the code used perhaps only works within that environment, I am surprised they wouldn't provide information on what changes would be required to use this outside of their given environment and was hoping someone could shed some light on this? Perhaps I am altogether wrong, if so, any insight would be appreciated.
Browser Console Output:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').
I also had the same problem but it was resolved when I used Xampp. What you have to do is install xampp on your machine and then locate its directory. After You will find a folder named "htdocs". Just move your folder containing both js and HTML file into this folder. Now you have to open Xampp Control Panel and click on start button for both - Apache and SQL server. Now open your browser and type in the URL:
http://localhost/"(Your htdocs directory name containing both of your pages)"
After this, click on .html file and you are done.
I want to use gulp-webapp with php server (not the default built in one).
my gulp file looks like this, but here is the extracted part:
gulp.task('serve', ['styles'], function () {
browserSync.init("*", {
debugInfo: true,
open: true,
proxy: "localhost/nl_mobile/app"
})
});
gulp.task('watch', ['serve'], function () {
// watch for changes
gulp.watch(['app/*.html'], reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/images/**/*', ['images']);
gulp.watch('bower.json', ['wiredep']);
gulp.watch('app/bower_components/**/*.scss', ['styles']);
gulp.watch('app/bower_components/**/*.js', ['scripts']);
});
The problem is, the changed content inject to the browser but it does not refresh itself, i have to refresh it manually.
I also changed this line:
// .pipe(gulp.dest('.tmp/styles'))
.pipe(gulp.dest('app/styles'))
because, i cannon't specify
server: {
baseDir: ['app', '.tmp'],
directory: true
},
because it will fire up some kind of http based server which doesn't understand php :(
In case you didn't run across the answer already, Browser Sync supports a proxy config option that can be used to reverse proxy another web server, e.g. Apache, php -S. You'll also need to watch the PHP files in your project for updates to trigger the reload in the attached browsers. Happy to expound with examples as needed.
I'm building a firefox addon and want to set a custom HTTP header.
I've already done some googling and found Setting HTTP headers from a Firefox extension
I however can't get it working.
I've tried placing it in my main.js and when that didn't work in one of my content scripts.
while in main.js the entire addon stops working, can't get a clear error from it though.
When in the content script just that script stops working.
Can anyone help?
For the addon-sdk you need to change that example a bit to look like this:
var chrome = require("chrome");
chrome.Cc["#mozilla.org/observer-service;1"].getService( chrome.Ci.nsIObserverService ).addObserver({
observe : function(subject, topic, data) {
var channel = subject.QueryInterface( chrome.Ci.nsIHttpChannel );
if ( /mysite/.test( channel.originalURI.host ) ) {
channel.setRequestHeader("x-mysite-extended", "true", false);
}
}
},"http-on-modify-request",false);
Note the mysite, you'll want to replace that with your host site and the headers with your headers.