Chrome extension wont load images - javascript

This is my mainfest.
{
"name": "CVAT FlowChart",
"version": "0.01",
"description": "Easier access to flow charts for QA",
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["./style.css"],
"web_accessible_resources": [{
"resources": ["Images/singleimage.png"],
"matches": ["<all_urls>"]
}],
"js": [ "jquery.js", "contentScript.js", "string.js" ]
}
],
"background": {
"service_worker": "background.js"
},
"host_permissions": ["<all_urls>", "http://localhost/*"],
"manifest_version": 3
}
I know I am using the correct src in my js file, because I can get there by following the link that I am imputing. what is wrong with my mainifest. Is there another place that could be the source of my problem?
this is the error I am getting.

Put web_accessible_resources at the same level as content_scripts.
I think your manifest.json is a format error. It would be a bug not to be able to detect it.
manifest.json
{
"name": "CVAT FlowChart",
"version": "0.01",
"description": "Easier access to flow charts for QA",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"css": [
"./style.css"
],
"js": [
"jquery.js",
"contentScript.js",
"string.js"
]
}
],
"web_accessible_resources": [
{
"resources": [
"Images/singleimage.png"
],
"matches": [
"<all_urls>"
]
}
],
"background": {
"service_worker": "background.js"
},
"host_permissions": [
"<all_urls>",
"http://localhost/*"
],
"manifest_version": 3
}

Related

Chrome extension won't work on HTTPS urls

The chrome extension I developed works on every domain besides HTTPS ones.
I've tried setting matches like this: "matches": ["http://*/*","https://*/*"].
But it still doesn't work.
This is my manifest.json:
{
"manifest_version": 2,
"name": "My App",
"version": "0.01",
"background": {
"persistent":true,
"page":"background.html"
},
"content_scripts": [{
"matches": ["http://*/*","https://*/*"],
"js": ["app.js"],
"js": ["jquery.min.js"]
}
],
"permissions": [
"tabs",
"http://*/*"
]
}
Well, this is awkward.
Just had to change permissions from:
"permissions": [
"tabs",
"http://*/*"
]
To:
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]

document.body returning iframe body

I am developing a chrome extension that injects html to Linkedin. When I do $(document.body).append($("<div>")); from my Js file, it also appends for an Iframe component that's on the page.How ever when I type $(document.body) on the console it only returns main body.
How do I restrict it to only main body from my js file.?
My manifest file:
{
"manifest_version":2,
"name": "Hawk! Beta",
"description": "Hawk",
"version": "1.0",
"permissions": [
"activeTab",
"tabs",
"storage",
"https://ajax.googleapis.com/",
"https://*.ngrok.io/"
],
"icons": {
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
"browser_action": {
"default_icon": {
"19": "img/icon.png",
"38": "img/icon.png"
}
},
"background": {
"scripts": [
"js/lib/jquery.min.js",
"js/lib/asteroid/ddp.js",
"js/lib/asteroid/q/q.js",
"js/lib/asteroid/asteroid/dist/asteroid.chrome.js",
"js/lib/asteroid/asteroid/dist/plugins/facebook-login.js",
"js/lib/asteroid/asteroid/dist/plugins/google-login.js",
"js/lib/asteroid/asteroid/dist/plugins/github-login.js",
"js/lib/bootstrap.min.js",
"js/background.js"
]
},
"content_scripts": [
{
"matches": [
"https://www.linkedin.com/*"
],
"all_frames" : true,
"match_about_blank": true,
"js": [
"js/lib/jquery.min.js",
"js/lib/handlebars.js",
"js/content_scripts/getPagesSource.js"
],
"css":[
"css/custom.css"
]
}
],
"web_accessible_resources": [
"img/*",
"js/*",
"js/lib/*",
"css/custom.css",
"html/*"
]
}
The code I used to inject html
function injectHtml(){
console.log(document.body); //this returns 2 bodies
$(document.body).append($("<div>", {
"class": "myapp-container"
}));
}
I only want to inject into main body and not into iframe body.
As suggested by Patrick and wOxxOm , I edited the manifest file's content_scripts to look like below.
"content_scripts": [
{
"matches": [
"https://www.linkedin.com/*"
],
"all_frames" : false, //this had to be changed
"match_about_blank": true,
"js": [
"js/lib/jquery.min.js",
"js/lib/handlebars.js",
"js/content_scripts/getPagesSource.js"
],
"css":[
"css/custom.css"
]
}
]
It now works fine. Thanks guys.
Edit:
all_frames:
Controls whether the content script runs in all frames of the matching
page, or only the top frame.
For more we have,
this link to know more

chrome.tabs.executeScript event don't work anymore?

I have this code below that until last week was working, but now when I will go execute again, this not works.
Based in this question and tested by me, using chrome.tabs.onUpdated.addListener event, works fine, but I have some strings in msgBox.js file, that cause errors relative to encoding (UTF-8/ANSI) and because this, all script inside of msgBox.js file is necessary execute using chrome.tabs.executeScript.
msgBox.js
function msg()
{
alert("hello!");
}
msg();
event.js
chrome.webRequest.onCompleted.addListener(
function onWindowLoad() {
chrome.tabs.executeScript(null, {
file: "msgBox.js"
}, function() {
});
}
,
{
urls: ["<all_urls>"],
types: ["main_frame"]
},
["responseHeaders"]
);
manifest.json
{
"background": {
// "page": "popup.html"
"scripts": ["event.js"]
},
"description": "Media Player for Flash",
"manifest_version": 2,
"name": "Media Player",
"icons": {
"128" : "picture/flash128.png" ,
"48" : "picture/flash48.png"
},
"web_accessible_resources": [
"event.js"
],
"content_scripts": [
{
"matches": ["<all_urls>", "*://*/*", "http://*/*", "https://*/*"],
"js": ["event.js"],
"run_at": "document_end",
"all_frames": true
}
],
"permissions": [ "tabs", "background", "activeTab", "<all_urls>", "webNavigation", "webRequest", "http://*/*", "https://*/*", "*://*/*" ],
"version": "1.0"
}
What can is wrong?
Any help will welcome.
According to https://developer.chrome.com/extensions/tabs#method-executeScript
null is not a valid option for object in "executeScript", Try using "string" in it's place. It worked for me at least when trying to reproduce and fix
Edit: although that does not explain why it worked before but stopped

Content script on chrome error page

How can I run my extension content script on Google Chrome error page?
For example on the "This webpage is not available" error page? Here is my manifest.json config:
{
"manifest_version": 2,
"name": "injectbox",
"version": "1.1",
"background": {
"scripts": ["jquery-1.11.1.min.js", "bg.js" ]
},
"content_scripts": [
{
"js": [ "jquery-1.11.1.min.js" ],
"matches": [ "<all_urls>" ],
"match_about_blank": true,
"run_at": "document_end"
},
{
"js": [ "content.js" ],
"css":["styles.css"],
"matches": [ "<all_urls>" ],
"match_about_blank": true,
"run_at": "document_end"
}
],
"permissions": [
"tabs", "http://*/*", "https://*/*", "file://*/*", "ftp://*/*",
"webRequest",
"storage"
]
}
I don't think it's possible, most probably this is an internal chrome:// page, which are excluded from page matches.
An alternative solution would be to listen to error events in webRequest/webNavigation APIs and replace the error page with your own.

Get url of tab that called inject-script

There is a problem.
I want to get url of tab that called inject-script content.js:
My manifest.json:
{
"background_page": "background.html",
"content_scripts": [ {
"all_frames": true,
"matches": [ "http://*/*", "https://*/*" ],
"js": [ "content.js" ],
"run_at": "document_start"
} ],
"description": "Test...",
"name": "TestExt",
"permissions": [ "tabs", "http://*/*", "https://*/*" ],
"version": "0.1.0"
}
My content.js:
document.addEventListener("beforeload", function(event) {
console.log(document.location.href);
}, true);
Result for link http://ya.ru:
http://ya.ru/
http://kiks.yandex.ru/system/fc06.html
http://suggest.yandex.ru/jquery-1-4-2.crossframeajax.html
but i need to see this
http://ya.ru/
http://ya.ru/
http://ya.ru/
Try window.top.document.location.href.

Categories

Resources