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
Related
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
}
I try to add a class to an element on Facebook page with a chrome extension. Unfortunately my script does not work... My goal is to select the posts containing an ad in the feed. All posts containers look similar, the only difference is the "sponsorized" tag which is the height child of the main container.
script.js:
var x = document.getElementsByClassName("uiStreamSponsoredLink").parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
x.className += "otherclass";
Manifest:
{
"name": "Project",
"version": "0.0.1",
"manifest_version": 2,
"default_locale": "en",
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"permissions": [
"*://*.facebook.com/*"
],
"content_scripts": [
{
"matches": [
"*://*.facebook.com/*"
],
"css": [
"content_script/replace-reactions.css"
],
"js": [
"content_script/script.js"
]
}
],
"web_accessible_resources": [
"img/*.png"
]
}
In script.js add this,
For example,
document.getElementsByTagName('body').attr('class','YOUR CLASS NAME');
Here I set class name for body tag. You can set this for any element in the page.
I built a Chrome Extension script that is supposed to run on Reddit.
My script:
console.log("hello world");
My manifest.json
{
"manifest_version": 2,
"name": "Name",
"description": "Desc",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": [
"*://reddit.com/*"
],
"js": [
"contentscript.js"
],
"run_at": "document_end"
}
],
"permissions": [
"tabs", "*://reddit.com/*", "activeTab"
]
}
The script doesn't show up in the "Content Script" section in the chrome dev tools. Does anyone have an idea why my extension is not running?
"*://reddit.com/*" doesn't match a valid url, you should use "*://*.reddit.com/*"
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
How can I write a simple Chrome Extension content script that will execute JavaScript (for example alert("hello");) on every page load?
So when I navigate to a page or reload a page, the JavaScript should run.
This is my manifest.json file so far:
{
"name": "Highlight some phrases",
"description": "Hightlight some pre defined text from websql database after page loads",
"version": "0.1",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"]
}
],
"background": {
"page": "background.html"
},
"manifest_version": 2
}
If all you need is to alert hello on every page load or reload, below is a simple demo:
Manifest.json:
{
"name": "Highlight some phrases",
"description": "Hightlight some pre defined text after page loads",
"version": "0.1",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"],
"run_at": "document_end" // Pay attention to this line
}
],
"manifest_version": 2
}
and content.js:
// alert("hello");
document.body.style.background = 'yellow';
Yes, that's enough.
And of course, don't forget to add an icon named icon.png at the same directory with these two files, then test it in Google Chrome.