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.
Related
I am using background.js script to hide my page_action icon with the following code:
chrome.pageAction.hide(sender.tab.id, function(some) {
console.log(sender.tab.id);
});
However, the icon is always 'on' and never gets hidden. I do not have any other functionality which enables the icon, and according to page_action documentation, the icon should be hidden by default.
If I remove my content script from manifest.json, indeed, the icon is disabled by default.
Here is manifest.json:
{
"manifest_version": 2,
"name": "Chrome Extension",
"description": "Chrome Extension",
"minimum_chrome_version": "10.0",
"version": "1.0",
"page_action": {
"default_icon": "logo.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"js/vendor.js",
"js/content_script.js"
],
"css": [
"js/content_script.css"
]
}
],
"background": {
"scripts": [
"js/vendor.js",
"js/background.js"
]
},
"permissions": [
"declarativeContent",
"tabs",
"webNavigation",
"storage",
"activeTab",
"<all_urls>"
]
}
Any thoughts?
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
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/*"
Well this is not showing the popup help!!!! When I run it the extension looks a bit white, without colour and when i click it the popup doesn't show up. Honestly I haven't got a clue!
{
"name": "Youtube",
"version": "0.0.1",
"manifest_version": 2,
"description": "Youtube",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"page_action": {
"default_icon": "icons/icon19.png",
"default_title": "page action demo",
"default_popup": "files/popup.html"
},
"permissions": [
"bookmarks",
"chrome://favicon/",
"clipboardRead",
"clipboardWrite",
"contentSettings",
"contextMenus",
"cookies",
"fileBrowserHandler",
"tts",
"ttsEngine",
"history",
"idle",
"management",
"notifications",
"tabs",
"geolocation"
],
"content_scripts": [
{
"matches": [
"http://www.youtube.com*"
],
"js": [
"js/Youtube.js"
]
}
]
}
A page action needs to be "shown" for the button to do anything, i.e. you have to either call chrome.pageAction.show for a tab or use chrome.declarativeContent to show it.
Blame Google for crippling Page Actions so they are now unintuitive.
If you want an always-active button you need a Browser Action instead.
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.