I was building a chrome extension and used some icons from font awesome. However, those icons aren't loading because of the following error-
For reference, here is the manifest.json file-
{
"manifest_version": 2,
"name": "Safe and Secure",
"description": "Every security tool at one place.",
"version": "1.0.0",
"icons": {"128": "logo_128.png"},
"browser_action": {
"default_icon": "images/logo.png",
"default_popup": "index.html"
}
}
Chrome Extensions by default have a Content Security Policy of only files located within the extensions directory as specified here. The reason is so your extension's users are not vulnerable to malicous code that could be brought in from a website.
If you want to use the font-awesome script for icons, you must specify so in your manifest.json.
{
"manifest_version": 2,
"name": "Safe and Secure",
"description": "Every security tool at one place.",
"version": "1.0.0",
"icons": {"128": "logo_128.png"},
"browser_action": {
"default_icon": "images/logo.png",
"default_popup": "index.html"
}
// add this line
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
}
The above is just an example of how you would bring it in. I would check the website linked above in order to find an example that matches your use-case.
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,
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.
{
"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.