{
"manifest_version": 2,
"name": "Kitten Radio Extension",
"description": "Listen while browsing the internet freely and without a background popup open to Kitten Radio",
"version": "1.0",
"permissions": [
"http://somewhat.server.com:8041/"
],
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>Kitten Radio</title>
<meta charset="utf-8">
</head>
<body>
<audio id="player" src="http://somewhat.server.com:8041/;mp3" controls>This player do not work on this browser</audio>
</body>
</html>
Hello again stackoverflow!
I'm trying to develop a chrome extension to play music in the background whilst the user can navigate the web.
The popup is showing fine and the audioplayer is there, but the audio won't load. Using "Inspect Element" I found that the stream is stuck on "Pending".
How can I solve this?
I've tried *://*/ in the "permissions" aswell.
The popup window does not stay opened. So you should try playing the file in your background page. Here is two posts on this subject:
Chrome extension, play sound in background script
Use chrome.extension.getBackgroundPage() to play an audio file
I do not think the issue comes from your audio source.
Related
I'm trying to make an extension for Chrome to make new tabs load a local HTML file. I have partially succeeded in this, by adding a .json file to the main directory with the following code:
{
"name": "Extension Name",
"description": "Extension description",
"version": "0.1",
"incognito": "split",
"chrome_url_overrides": {
"newtab": "start.html"
},
"manifest_version": 2
}
This sort of works. Opening a new tab loads the HTML file, but the majority of the css doesn't work and none of the images load.
I don't want to install an extension from the web store to do this for me, as I would like to be able to distribute this in the future.
I have no experience at all with Google Chrome extensions, and I couldn't find anything relating to this specific issue elsewhere. Does anyone know what I'm doing wrong? Do I need to be do something else? Is this possible? Any help would be greatly appreciated.
let me share I've made shortly.
This is the same manifest file you'd mentioned above
{
"name": "Extension Name",
"description": "Extension description",
"version": "0.1",
"incognito": "split",
"chrome_url_overrides": {
"newtab": "start.html"
},
"manifest_version": 2
}
I created a folder named assets in the root directory of chrome extension (that has the manifest.json file), where I created style.css and added an image file img.jpg.
.content p {
font-size: 26px;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
<div class="content">
<p>Hello world</p>
<img src="assets/image.jpg">
</div>
</body>
</html>
This works on my end.
I hope it would give you a hind on what went wrong there.
Thanks,
I want to load some external scripts in a sandbox page and then on event page uses message passing to communicate with the sandbox page to use those scripts. I am basically following these two documentations:
https://developer.chrome.com/extensions/sandboxingEval
https://developer.chrome.com/extensions/manifest/sandbox
This is the manifest.json I use with the sandbox and event page config:
{
"manifest_version": 2,
"name": "Diver",
"description": "Diver",
"version": "0.0.1",
"devtools_page": "devtools.html",
"minimum_chrome_version" : "57",
"background": {
"page": "eventpage.html",
"persistent": false
},
"sandbox": {
"pages": ["sandbox.html"]
}
}
This is the eventpage.html, which loads the sandbox.html in an iframe:
<!doctype html>
<html>
<body>
<iframe id="sandboxFrame" src="sandbox.html"></iframe>
</body>
</html>
This is the sandbox.html, which loads an external script:
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/5.2.3/ajv.min.js"></script>
</head>
<body>
</body>
</html>
When I try it I am getting an error saying the loading of the external script is blocked by content security policy. So looks like this is not allowed according to the doc:
"Starting in version 57, Chrome will no longer allow external web content (including embedded frames and scripts) inside sandboxed pages. Please use a webview instead"
"Also, the CSP you specify may not allow loading external web content inside sandboxed pages."
The doc asks me to use webview but webview is only available in Chrome App. Next I upload sandbox.html into a cdn and replace it in the eventpage.html:
<!doctype html>
<html>
<body>
<iframe id="sandboxFrame" src="https://www.somecdn.com/sandbox.html"></iframe>
</body>
</html>
The external script loads this time, probably because that external page doesn't have the CSP blocking the script.
I don't understand why the same script is blocked when used in sandbox.html in the extension but not when sandbox.html is loaded from an external domain. I know it's because of CSP, but why do Chrome decided to block it this way. I tested it in Chrome 56 and it's not blocked. Only after Chrome 57 it's blocked.
Bellow is my manifest.josn
{
"manifest_version": 2,
"name": "speed booster",
"description": "This extension will Boost Your page speed",
"version": "1.0",
"browser_action": {
"default_icon": "ajax-loader.gif",
"default_popup": "style.css"
},
"permissions": [
"activeTab"
]
}
After packing my extension gif, css file is packed and installed in Chrome
now How do I use style.css file for my website hosted website like CDN hosted locally?
My chrome extension name is ex so i used this on html
<link href="chrome-extension://ex/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
but doesn't work
You need to list any resources that should be accessible in a webpage as web_accessible_resources in your extension manifest. See docs for Web Accessible Resources.
Once you've done that, as the docs explain, your resource should be available using chrome-extension://[PACKAGE ID]/[PATH]. For example:
<link href="chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
You can generate this full URL in your extension using chrome.extension.getURL. For example:
console.log(chrome.extension.getURL('bootstrap.css'))
I wish to wrap my web app inside a Chrome Packaged App.
My ultimate goals are as follows:
Mask the URL to hide my generic (second-tier) domain (e.g., http://my-app.big-company.com).
Mask the browser to give the appearance of a native desktop app.
Leverage whatever mobile conversion that Chrome Apps for Mobile might provide to allow me to use a single codebase and set of web assets (HTML, CSS & JS) to deploy my app to the mobile app stores for Android and iOS.
Here is what I have so far:
manifest.json
{
"name": "Hello World!",
"description": "My first Chrome App",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "icon-16.png", "128": "icon-128.png" }
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
window.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="http://example.com/"></iframe>
</body>
</html>
I suspect, at a minimum, there is a problem in the window.html. Specifically, I doubt I should be using an <iframe> to fetch my web app content.
Here is the documentation I have been following.
Please help.
You can do this, but you need another tag; specifically, <webview> tag instead of <iframe>. See linked documentation for all the possibilities of that tag. It also requires the "webview" permission.
Do note that this does not work well with the "should behave like a native app" philosophy, but it is possible.
This documentation suggests the OP's approach will not work and, instead, you need to package and install all the assets locally.
When I open my extension uncompiled (using an iframe where there should be a webview tag), the app works fine. When I make the iframe into a webview and compile, the webview does not show up.
popup.html:
<!doctype html>
<head>
<title>title</title>
</head>
<body>
<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px"></webview>
</body>
</html>
manifest:
{
"manifest_version": 2,
"name": "test",
"description": "test",
"version": "1.0",
"permissions": ["webview"],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
So far webview tag api has been available only to the chrome apps (judging by the fact that there is no mention off webview in Extension API page). So currently, you can't use it in extensions or legacy packaged apps.