var inputs = document.getElementsByClassName('uiButtonText'); for(var i=0; i<inputs.length;i++) { inputs[i].click(); }
I have this Javascript code.I want to convert it to an Extension(Chrome webapp for personal use).That is every time i click this in chrome browser. i want to execute this javascript.
How can i achieve this
so that i can avoid entering this code often in console.
Manifest.json
1{
2 "manifest_version": 2,
3
4 "name": "blah",
5 "description": "blah blah",
6 "version": "1.0",
7
8 "browser_action": {
9 "default_icon": "icon.png",
10 "default_popup": "popup.html"
11 },
12 "permissions": [
13 "activeTab"
14 ],
15 "web_accessible_resources": [
16 "popup.js"
17 ]
18 }
popup.html
<!doctype html>
<html>
<head>
<title>Congoroo</title>
<script src="popup.js"></script>
</head>
<body>
<h1>HaAHAHAH</h1>
<button id="checkPage">Check this</button>
</body>
</html>
popup.js
var inputs = document.getElementsByClassName('uiButtonText'); for(var i=0; i<inputs.length;i++) { inputs[i].click(); }
code in popup.js works perfectly in Console of chrome.
but in this extension i made nothing happens!
Manifest.json
{
"name": "InviteThemAll",
"version": "0.0.1",
"manifest_version": 2,
"description": "Invite all Friends in Fb to Fanpage",
"homepage_url": "http://felixjosemon.github.io/",
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"browser_action": {
"default_title": "FB!"
},
"permissions": [
"https://*/*",
"http://*/*",
"tabs"
]
}
popup.js
(function() {
var inputs = document.getElementsByClassName('uiButtonText'); for(var i=0; i<inputs.length;i++) { inputs[i].click(); } })();
background.js
// this is the background code...
// listen for our browerAction to be clicked
chrome.browserAction.onClicked.addListener(function (tab) {
// for the current tab, inject the "popup.js" file & execute it
chrome.tabs.executeScript(tab.ib, {
file: 'popup.js'
});
});
After Lot of tries I made background.js to inject popup.js into current Tab and this works perfectly to my need.
Using this you can sent Invites to all your Fb friends to Like your Fanpage.
https://github.com/Felixjosemon/InviteThemAll
Related
I am working on a chrome extension that will enable user to click on an added button to inform me of their interest.
Basically, I built a chrome extension which displays a toolbar and I want the user to be able to click on this toolbar and execute a script after it.
Here are my codes and it does not work...
manifest.json file :
{
"manifest_version": 2,
"name": "XX Extension",
"version": "1.0",
"description": "The best extension for my friends",
"icons":{
"128" : "images/icon128.png",
"48" : "images/icon48.png",
"16" : "images/icon16.png"
},
"background": {
"scripts": ["js/jquery-3.4.1.min.js", "js/background.js"]
},
"permissions": [
"contextMenus",
"activeTab",
"tabs",
"notifications"
],
"content_scripts": [
{
"matches": ["https://www.mysite.fr/produit/*", "*://*.mysite.fr/produit/*"],
"css": ["css/extension_style.css"],
"js": ["js/jquery-3.4.1.min.js", "js/content.js"]
}
],
"browser_action": {
"default_icon": "images/icon16.png",
"default_title": "XX Extension",
"default_popup": "popup.html"
},
"web_accessible_resources": [
"toolbar.html",
"css/extension_style.css"
]
}
content.js file :
var script_text=$("script:contains(['ean'])").html();
var product_ean=script_text.split("['product']['ean']")[1].split(";")[0].replace("= '","").replace("'","");
chrome.runtime.sendMessage(product_ean);
var url = chrome.extension.getURL('toolbar.html');
var height= '35px';
var iframe = "<iframe src='"+url+"' id='myOwnCustomToolBar_TT91' style='height:"+height+"'></iframe>";
$('html').append(iframe);
$('body').css('transform','translateY('+height+')');
/* Topbar clicked */
$('#myOwnCustomToolBar_TT91').on('click', function(){
alert('it is clicked');
// do stuff executing js script
});
background.js file :
chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){
alert("Le code EAN de ce produit RDC est "+response);
});
chrome.browserAction.onClicked.addListener(function(){
chrome.tabs.executeScript(null, {
code : "alert('Wow it is working guy');"
});
});
The chrome extension work well to alert the EAN code of the product but the click event on the appended topbar by the extension does not work...
Thank you very much for your feedback and help !
Best regards,
I have created a chrome extension that will append an index to the beginning of search results on google but so far I have only been successful in getting the right output if I inspect element then refresh the page. If I regularly refresh the page it is as if the code was not run.
manifest.json:
{
"manifest_version": 2,
"name": "number nodes for accessibility",
"version": "0.1.0",
"description": "numbering of anchor tags for accessibility",
"permissions": ["activeTab", "<all_urls>", "file:///*"],
"browser_action": {
"default_icon": "128.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [{
"matches":["<all_urls>"],
"css": ["number.css"],
"js": ["jquery-3.4.1.js","number.js"]
}]
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
file: 'number.js'
});
});
number.js
$(document).ready(()=>{
var a = $("div.v0nnCb")
var links=[];
for (let index = 0; index < a.length; index++) {
const element = a[index].innerHTML;
a[index].innerHTML = "("+index+"): "+element;
links.push(a[index].baseURI)
}
console.log(links)
})
I want to know how to detect if a button with a certain id is clicked on a webpage with my chrome extension.
With my code I have an error saying that my element is undefined.
Here is my manifest :
{
"manifest_version": 2,
"name": "app",
"description": "my app",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Changer le background"
},
"permissions": [
"activeTab",
"storage"
]
}
And my popup.js file :
document.addEventListener('DOMContentLoaded', () => {
getCurrentTabUrl((url) => {
document.getElementById('mybutton').addEventListener('click', function() {
var script = "console.log('clicked');";
chrome.tabs.executeScript({code: script});
});
});
});
your popup.js will not load until the user himself will click on the extension's icon... i think you should change your approach and use a content-script like this:
document.getElementById('mybutton').addEventListener('click', function() {
console.log('clicked');
});
you'll need to update your manifest.json for using a content script, something like that:
"content_scripts": [
{
"matches": ["the url of a page for the script", "the url of another page"],
"js": ["your_script.js"]
}
],
how can I do a Chrome extension that replaces images with other images?
Here's my manifest.json code so far:
{
"name": "HaramB",
"version": "69.0.420.666",
"manifest_version": 2,
"description": "This is HaramB's own extension!",
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "popup.html",
"default_title": "HaramB"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
],
"icons": {
"128": "images/icon.png"
},
"web_accessible_resources": [
"images/nicolas.jpg"
],
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["onPage.js"],
"css": ["onPage.css"]
}]
}
And here's my onPage.js code:
var picture = "images/nicolas.jpg";
document.getElementsByTagName("img").setAttribute("src", picture);
Dont't care about the popup.html or the onPage.css files.
It's the onPage.js file i want it to do it with, if it's not possible, tell me.
document.getElementsByTagName() returns an Array of elements. This means you need to loop through the array and call the methods you want on them individually, like so:
var picture = "images/nicolas.jpg",
images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].setAttribute("src", picture);
};
Note: it is preferable to use images[i].src = ... to using setAttribute as detailed in this question
I have a context menu option and when it is selected I want insert some HTML. I have tried doing this
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText='test123';
But it's not working for me.
Note I am trying to avoid using jQuery.
Here you can research how to create an extension and download the sample manifest.json.
Content Scripts can be used to run js/css matching certain urls.
manifest.json
{
"name": "Append Test Text",
"description": "Add test123 to body",
"version": "1.0",
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["content-script.js"]
}
],
"browser_action": {
"default_title": "Append Test Text"
},
"manifest_version": 2
}
content-script.js
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText="test123";
The above will execute the content-script.js for all urls matching http://*/* where * is a wildcard. so basically all http pages.
Content scripts have many properties which can be found in the link above.
Programmatic injection can be used when js/css shouldn't be injected into every page that matches the pattern.
Below shows how to execute the js onclick of the extension icon:-
manifest.json
{
"name": "Append Test Text",
"description": "Add test123 to body",
"version": "1.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Append Test Text"
},
"manifest_version": 1
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'var div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";'
});
});
This uses the executeScript method, which also has an option to call a separate file like so:-
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
file: "insert.js"
});
});
insert.js
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText="test123";