Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bare minimum Chrome extension to inject a JS file into the given page when you click on the browser action icon. The script then inserts a new div into the DOM.
// this is the background code...
// listen for our browerAction to be clicked
chrome.browserAction.onClicked.addListener(function (tab) {
// for the current tab, inject the "inject.js" file & execute it
chrome.tabs.executeScript(tab.ib, {
file: 'inject.js'
});
});
// this is the code which will be injected into a given page...
(function() {
// just place a div at top right
var div = document.createElement('div');
div.style.position = 'fixed';
div.style.top = 0;
div.style.right = 0;
div.textContent = 'Injected!';
document.body.appendChild(div);
alert('inserted self... giggity');
})();
{
"name": "Injecta",
"version": "0.0.1",
"manifest_version": 2,
"description": "Injecting stuff",
"homepage_url": "http://danharper.me",
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"browser_action": {
"default_title": "Inject!"
},
"permissions": [
"https://*/*",
"http://*/*",
"tabs"
]
}
@ktmellow

This comment has been minimized.

Copy link

commented Apr 20, 2016

You're a hero, Dan Harper!

@albinekb

This comment has been minimized.

Copy link

commented Sep 14, 2016

AMAZING ⚡️

@botmtl

This comment has been minimized.

Copy link

commented Sep 27, 2016

Even better, this works with:

"permissions": [
    "activeTab"
  ]

... avoiding the dreaded "this script can read and change all your data on the websites you visit".

@Thatkookooguy

This comment has been minimized.

Copy link

commented Sep 28, 2016

thanks for this! is it easy to make this work on specific urls without clicking the extension?

great work!

@danvine

This comment has been minimized.

Copy link

commented Oct 13, 2016

@Thatkookooguy yes.
I'll leave this here in case anyone needs a heavier template. http://extensionizr.com/

@afd57

This comment has been minimized.

Copy link

commented Oct 15, 2016

thanks for this. I have a problem. I want to take info at website. I changed this application.

background.js

chrome.browserAction.onClicked.addListener(function (tab) { // for the current tab, inject the "inject.js" file & execute it chrome.tabs.executeScript(tab.ib, {file: 'inject.js'}, function(result) { console.log(result[0]) } ); });

inject.js

(function() {
    var t3 = document.getElementById("time3");
        console.log(t3);//works;
        return t3;

})();

Function writes t3 on console. but don't return t3 variable. console.log(result[0]) writes 'null' ;

what is the problem this code ?

thaks good job

@dipongkor

This comment has been minimized.

Copy link

commented Oct 28, 2016

Can I inject css any the same way?

@artursobon

This comment has been minimized.

Copy link

commented Feb 7, 2017

background.js

chrome.tabs.executeScript(tab.ib, {

Shouldn't be there:

chrome.tabs.executeScript(tab.id, {

tab.id instead of tab.ib ?

In this case tab.ib is null, so:

The ID of the tab in which to run the script; defaults to the active tab of the current window.

https://developer.chrome.com/extensions/tabs#method-executeScript

@sinameraji

This comment has been minimized.

Copy link

commented Jun 24, 2017

This is amazing ❤️

@shihokambara

This comment has been minimized.

Copy link

commented Jul 9, 2017

thanks for this!
"persistent": false
also worked.

@Modelmat

This comment has been minimized.

Copy link

commented Aug 16, 2017

This does not work....

@cameronjsamuels

This comment has been minimized.

Copy link

commented Aug 26, 2017

Great job!!

@Peru-J

This comment has been minimized.

Copy link

commented Oct 23, 2017

Great job !!

can we execute jquery with this ? what changes i need to add to execute jquery script

@shalinibunga

This comment has been minimized.

Copy link

commented Oct 29, 2017

super and amazing.........................

@http91

This comment has been minimized.

Copy link

commented Dec 1, 2017

Man, you saved my day.
Thanks!

@ORESoftware

This comment has been minimized.

Copy link

commented Jan 1, 2018

is there a way to run/execute a Chrome Extension in a new tab/window by loading the extension's code in that new tab or window?
https://stackoverflow.com/questions/48048617/load-run-execute-chrome-extension-in-new-tab

@beherebaba

This comment has been minimized.

Copy link

commented Jan 3, 2018

I wish I could kiss you :')

@raichuk

This comment has been minimized.

Copy link

commented May 2, 2018

Never before this even tried a Chrome Extension.
Found this, check how to load on chrome.. in less than 30 seconds all working.

A real hero Darper!

@Iazzetta

This comment has been minimized.

Copy link

commented Jun 7, 2018

THANK YOU!

@charusharma99

This comment has been minimized.

Copy link

commented Jun 18, 2018

I want to insert bypass frame busting code into html. I donot know how to insert whole script.

<script type="text/javascript"> var prevent_bust = 0; window.onbeforeunload = function() { prevent_bust++; } setInterval(function() { if (prevent_bust > 0) { prevent_bust -= 2; window.top.location = 'http://www.example.com/'; } }, 1); prevent_bust = 0; window.onbeforeunload = function() { prevent_bust++; } setInterval(function() { if (prevent_bust > 0) { prevent_bust -= 2; window.top.location = 'frame_busted_page.html'; } }, 1); </script>

Thank you .

@sridharar

This comment has been minimized.

Copy link

commented Jul 31, 2018

Danharper thanks for the idiomatic kit for getting things going.
Danvine thanks for the heavier template. Looks great and will try that.

I plunged into extension stuff, as I was getting tired of High Contrast Chrome extension not working, or only working sporadically.
Not sure why or what in my environment is making it not work. But I need something like that badly.

If you have any tips on how to make gmail display all its views/texts white on black background it would be a great head start for me.
That would be good for the start to be extended other pages as well.

Thanks in advance.

@zArubaru

This comment has been minimized.

Copy link

commented Jul 31, 2018

@dipongkor
You can inject CSS with the insertCSS method. Though beware, you may experience some priority issues doing it this way.

For some use cases the previous is enough. For others my recommendation is to inject a script that injects the css that you need.

@nachishankar

This comment has been minimized.

Copy link

commented Nov 28, 2018

@dipongkor
You can inject CSS with the insertCSS method. Though beware, you may experience some priority issues doing it this way.

For some use cases the previous is enough. For others my recommendation is to inject a script that injects the css that you need.

Never before this even tried a Chrome Extension.
Found this, check how to load on chrome.. in less than 30 seconds all working.

A real hero Darper!

Hey, I'm a java noob and i'm trying to inject a script onto a live page. If anyone here can help me out just a little that would be great! PM me at twokeywood -skype or twokeywood@gmail.com

@FrankHu-MSFT

This comment has been minimized.

Copy link

commented Dec 10, 2018

This is truly so Convenient. Cheers and Thanks man!

@hanjin66

This comment has been minimized.

Copy link

commented Feb 19, 2019

How do I click on a JavaScript pop-up on the page, that does not have an element ID

@arunganesan

This comment has been minimized.

Copy link

commented Feb 23, 2019

Lifesavveerrrrrr

@brettsprad

This comment has been minimized.

Copy link

commented Mar 11, 2019

is there a way to insert a linked JS file?
e.g. insert the file at this URL: testsite.com/files/script.js

@sam-aldis

This comment has been minimized.

Copy link

commented Mar 26, 2019

https://codepen.io/sam-aldis/pen/NJJyax/

can you embed in comments? 😉
@dunklesToast

This comment has been minimized.

Copy link

commented Apr 14, 2019

@brettsprad Yes you can. Just create a new script element, add it to the document and then set the src to your url

Something like this:

var s = document.createElement('script');
s.src = "http://link.to/js";
(document.head || document.documentElement).appendChild(s);
@arthrnvrn

This comment has been minimized.

Copy link

commented May 28, 2019

<3<3

@wtorcaso

This comment has been minimized.

Copy link

commented Jun 26, 2019

This is a newbie question: When I hear "Chrome Extension", I think of code that the user has to agree to run, and that can be removed by the user at any time. Is this like that, or is "extension" an overloaded word in this context, and means something else?

Thanks!

@antony

This comment has been minimized.

Copy link

commented Jul 27, 2019

@wtorcaso you are correct in your assessment - a Chrome Extension is a user installable extension to the Chrome or Chromium browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.