danharper/background.js

wtorcaso · 2019-06-26T13:53:53Z

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 · 2019-07-27T12:40:40Z

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

waqas-mehmood-pk · 2019-09-23T14:05:29Z

@dunklesToast I have tried your suggested method but failed to execute the script of injected file.
Here is what I have tried.

First Approach:

chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
    chrome.tabs.executeScript(tabs.id, {
         code: "document.body.appendChild(document.createElement('script')).src = 'https://test.com/js/site.com.js'";
    });
});

In this approach .js file injected but script of that file could not access/run.

Second Approach:

chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
    chrome.tabs.executeScript({file: "https://test.com/js/site.com.js"});
});

Third Approach:

chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
    chrome.tabs.executeScript({
       tabId: tabs.id,
       file: "https://test.com/js/site.com.js"
    });
});

In both 2nd and 3rd approaches file not injected.

Veverke · 2020-05-06T13:21:21Z

According to the docs, if the goal is to inject scripts into tabs, I think declarative injection is the simplest solution. In the manifest, add

	"content_scripts": [
		{
		 "matches": ["https://*/*","http://*/*"],
		 "js": ["myJsFile.js"]
		}
	],

The above injects myJsFile.js into every tab opened in the browser.
And make sure you enabled 'activeTab' in the permissions setting.

qtcoder999 · 2020-06-05T13:57:55Z

you are awesome !!!!!!!! Thank you man!!!!

AnthonyisMedia · 2020-06-17T07:24:33Z

How would you remove the div by clicking the extension icon?

This method has worked great for adding a fixed menu div on top of a webpage but it would be awesome if I could delete/remove what I added and reset the page to the way it was. All without refreshing the page of course.

I figured making these changes to the background script and adding an ID to my div for deletion would work but the code doesn't seem to find the div. So I can't remove the div I added.

`

// this is the background code...

var ToggleExtension = false;

// listen for our browerAction to be clicked

chrome.browserAction.onClicked.addListener(function (tab) {

// for the current tab, inject the "inject.js" file & execute it	
if (ToggleExtension == false){

   chrome.tabs.executeScript(tab.ib, { file: 'Inject.js' });
   ToggleExtension = true;

} else if (ToggleExtension == true){

   var MyDiv = document.getElementById(MyDiv);
   MyDiv.parentNode.removeChild(MyDiv);
   ToggleExtension = false;

}
});`

ShamsherNawaz · 2020-07-09T07:06:34Z

Amazing..... Thanks man

File injected in any page when I click the icon. What if I want to inject file automaticaly after page load of a specific page/site.

rrakso · 2020-09-09T19:27:04Z

Hi @ShamsherNawaz!
Look at this comment (here is the reference).

I added also to this solution this piece of code

window.addEventListener("load", () => {
  // Here the rest of the code executed when page is fully loaded
});

bbsmithy · 2020-10-24T14:14:31Z

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

great work!

If you add this to your commands section in manifest.json

"commands":{
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      }
    }
  }

You can open the browser action with a keyboard command, which will trigger the onClick event

Randomblock1 · 2021-01-12T23:03:18Z

Thanks so much!! For anyone trying to inject JavaScript and run a function that already exists within the page:

inject.js

(function() {

        location.href="javascript:someExistingFunctionInPage(); void 0";

})();

from StackOverflow, because everything is

ac-0rn · 2021-01-19T21:43:16Z

Exactly what I was looking for, thanks!

njerschow · 2021-03-03T17:05:31Z

This is exactly what I needed, thanks!

KyraCoding · 2021-03-16T20:00:37Z

I know people have already said this, but THIS IS EXACTLY WHAT I NEED! Thanks!

tsikerdekis · 2021-05-08T16:44:34Z

Anyone knows if this solution works for V3?

siddharthcpatel · 2021-05-23T13:54:11Z

Anyone knows if this solution works for V3?

You have to make a few changes:

browserAction -> action

tabs -> scripting (You need to change permissions in manifest.json too.)

file: 'inject.js' -> files: ['inject.js'] // should be array

You also need to add another required parameter called target where you add files.
target: { tabId: tabId // should be integer }

Checkout chrome's official migration checklist.

EDIT: Updated code

chrome.action.onClicked.addListener(function (tab) {

	// for the current tab, inject the "inject.js" file &amp; execute it	
       chrome.scripting.executeScript(tab.ib, {
                target: {tabId: tabId} // required in MV3
		files: ['inject.js']	
       });
});

vineet-sinha · 2021-06-18T02:36:54Z

tab.ib is not a parameter, so the updated code should be:

chrome.action.onClicked.addListener(function (tab) {

	// for the current tab, inject the "inject.js" file &amp; execute it	
       chrome.scripting.executeScript({
                target: {tabId: tab.id},
		files: ['inject.js']	
       });
});

asmirbe · 2021-07-21T09:05:58Z

any proper way to disable the extension then remove the injected content clicking the extension icon again ??
Ty guys

600drive · 2021-08-26T05:37:21Z

URL: testsite.com/files/script.js

chrome.browserAction.onClicked.addListener(function (tab) {
// for the current tab, inject the "www.site.com/system/trail/inject.js" file & execute it
chrome.tabs.executeScript(tab.ib, {
URL: www.site.com/system/trail/inject.js
//file: 'inject.js'
});
});

600drive · 2021-08-26T05:37:32Z

no work

600drive · 2021-08-26T16:12:52Z

According to the docs, if the goal is to inject scripts into tabs, I think declarative injection is the simplest solution. In the manifest, add
	"content_scripts": [
		{
		 "matches": ["https://*/*","http://*/*"],
		 "js": ["myJsFile.js"]
		}
	],
The above injects myJsFile.js into every tab opened in the browser.
And make sure you enabled 'activeTab' in the permissions setting.

myJsFile.js if i want store on domain how can i do ? thanks you for your reply

ghost · 2021-09-06T17:02:28Z

Thanks xD

pablodz · 2021-11-07T22:13:18Z

Thanks mate

enniosousa · 2021-11-25T12:36:05Z

Thank you very much!

nimatalebi · 2022-02-07T09:39:47Z

It does not work if you do not add "web_accessible_resources": ["script.js"] to manifast.json

Suraj-bhan · 2022-07-09T10:23:27Z

hey
@danharper I want to inject some elements on page load(when some specific element is loaded on the page) in some particular webpage in some specific container without clicking the extension icon, is there any way I can do that?

arthurbolsoni · 2022-10-06T16:48:37Z

hey @danharper I want to inject some elements on page load(when some specific element is loaded on the page) in some particular webpage in some specific container without clicking the extension icon, is there any way I can do that?

i trying doing it with chrome.scripting.executeScript but until now i have doing this way:

manifest v3

  "content_scripts": [
      {
          "matches": [
              "https://*.twitch.tv/*"
          ],
          "run_at": "document_start",
          "js": [
              "content-script.js"
          ]
      }
  ],
  "web_accessible_resources": [
      {
          "resources": [
              "app/bundle.js"
          ],
          "matches": [
              "<all_urls>"
          ]
      }
  ]

content-script.js

function init(items) {
  var s = document.createElement("script");
  s.src = chrome.runtime.getURL("app/bundle.js");
  s.onload = function () {
    this.remove();
  };

  (document.head || document.documentElement).appendChild(s);

  window.addEventListener("message", (event) => {
    if (event.data.type && event.data.type == "init") {
      window.postMessage(
        {
          type: "setInit",
          value: chrome.runtime.getURL("app"),
        },
        "*",
      );
    }
    if (event.data.type && event.data.type == "getSetting") {
      window.postMessage(
        {
          type: "setSetting",
          value: items,
        },
        "*",
      );
    }
  });
}

chrome.storage.local.get(["whiteList", "toggleProxy", "proxyUrl"], (items) => init(items));

so, the bundle is loaded when the page is opened

i think is posible do it with less lines using chrome.scripting

murat1999 · 2022-12-15T04:46:59Z

I have a question regarding that. I know how to inject a js file when some action is triggered, but how can I inject a certain function in the js file? Like in the above example we are injecting js/inject.js file but I want to inject or execute a certain function in the background.js from js/inject.js file when I click the button in the popup.

arthurbolsoni · 2022-12-15T04:57:12Z

you will execute all the file as a function.

( () => {

//code

})()

I wasted a lot of time trying to find a way to pass parameter to this file. until you find the events.

You can run the file and tell it which function to activate using events: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

murat1999 · 2022-12-15T05:23:29Z

you will execute all the file as a function.
( () => {

//code

})()
I wasted a lot of time trying to find a way to pass parameter to this file. until you find the events.

You can run the file and tell it which function to activate using events: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

My goal is to run certain function say in js/inject.js file in all tabs in my chrome. Does by iterating all tabs and executing this js file on each tab give me a correct result? And when I run and tell which function to activate using events does it run on each tab individually?
My function is retrieving DOM, and other tab info (user agent, cookies etc) from each tab. And I am wondering if it works for each tab when I run js/inject.js file

Jumpjetjumpjet · 2023-01-19T14:59:14Z

Hi Good day
I have a plugin whose manifest version is 2 and I updated it to 3 and I don't know if it is correct or not but it gives an error in the background that the document is not defined.
My plugin files:
manifest.json
background.js
pics.png
content.js
I will put the code

//manifest.json v2
{
"manifest_version": 2,
"name": "bot",
"version": "5.07",
"description":"Telegeram : @ali_barati86",
"content_scripts" : [{
"matches" : ["http:///","https:///"],
"js" : ["background.js"]
}],

"browser_action": {
"default_icon": "crash.png",
"default_title": "Crash Bot"
},
"web_accessible_resources": ["content.js"],
"permissions": [
"https:///",
"http:///",
"tabs"
]
}

I updated the above codes to version three
//manifest.json v3

{
"manifest_version": 3,
"name": "bot",
"version": "5.07",
"description":"Telegeram : @ali_barati86",
"permissions" : [
"activeTab",
"scripting",
"tabs"
],

"host_permissions": [
"http:///",
"https:///",
"<all_urls>"
],
"background": {
"service_worker": "background.js",
"type": "module"
},
"icons":{
"16": "crash.png",
"32": "crash.png",
"48": "crash.png",
"128": "crash.png"
},
"action": {
"default_title": "crash bot",
"default_icon": "crash.png"
},
"web_accessible_resources": [
{
"resources": [
"content.js"
],
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'",
"sandbox": "sandbox allow-scripts; script-src 'self' 'https://apis.google.com/' 'https://www.gstatic.com/' 'https://.firebaseio.com' 'https://www.googleapis.com' 'https://ajax.googleapis.com'; object-src 'self'"
},
"matches": [
"http:///",
"https:///*",
"<all_urls>"
]
}
]
}

//background.js

var s = document.createElement('script');
s.src = chrome.extension.getURL("content.js");
s.onload = function() {
    this.parentNode.removeChild(this);
};

(document.head||document.documentElement).appendChild(s);

Please help me, I'm waiting, send me an email or a telegram
[email protected]
Telegram: @ali_barati86
If you want to tell me to check the plugin, please solve my problem, thank you
Plugin download link:
https://uupload.ir/view/extension_lst.zip/

	// 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');

	})();

danharper/background.js

wtorcaso commented Jun 26, 2019

antony commented Jul 27, 2019

waqas-mehmood-pk commented Sep 23, 2019

Veverke commented May 6, 2020 •

edited

Loading

qtcoder999 commented Jun 5, 2020

AnthonyisMedia commented Jun 17, 2020 •

edited

Loading

ShamsherNawaz commented Jul 9, 2020

rrakso commented Sep 9, 2020

bbsmithy commented Oct 24, 2020

Randomblock1 commented Jan 12, 2021

ac-0rn commented Jan 19, 2021

njerschow commented Mar 3, 2021

KyraCoding commented Mar 16, 2021

tsikerdekis commented May 8, 2021

siddharthcpatel commented May 23, 2021 •

edited

Loading

vineet-sinha commented Jun 18, 2021

asmirbe commented Jul 21, 2021

600drive commented Aug 26, 2021

600drive commented Aug 26, 2021

600drive commented Aug 26, 2021

ghost commented Sep 6, 2021

pablodz commented Nov 7, 2021

enniosousa commented Nov 25, 2021

nimatalebi commented Feb 7, 2022 •

edited

Loading

Suraj-bhan commented Jul 9, 2022

arthurbolsoni commented Oct 6, 2022 •

edited

Loading

murat1999 commented Dec 15, 2022

arthurbolsoni commented Dec 15, 2022 •

edited

Loading

murat1999 commented Dec 15, 2022 •

edited

Loading

Jumpjetjumpjet commented Jan 19, 2023 •

edited

Loading

	// 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'
	});
	});

	{
	"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"
	]
	}

danharper/background.js

wtorcaso commented Jun 26, 2019

antony commented Jul 27, 2019

waqas-mehmood-pk commented Sep 23, 2019

Veverke commented May 6, 2020 • edited Loading

qtcoder999 commented Jun 5, 2020

AnthonyisMedia commented Jun 17, 2020 • edited Loading

ShamsherNawaz commented Jul 9, 2020

rrakso commented Sep 9, 2020

bbsmithy commented Oct 24, 2020

Randomblock1 commented Jan 12, 2021

ac-0rn commented Jan 19, 2021

njerschow commented Mar 3, 2021

KyraCoding commented Mar 16, 2021

tsikerdekis commented May 8, 2021

siddharthcpatel commented May 23, 2021 • edited Loading

vineet-sinha commented Jun 18, 2021

asmirbe commented Jul 21, 2021

600drive commented Aug 26, 2021

600drive commented Aug 26, 2021

600drive commented Aug 26, 2021

ghost commented Sep 6, 2021

pablodz commented Nov 7, 2021

enniosousa commented Nov 25, 2021

nimatalebi commented Feb 7, 2022 • edited Loading

Suraj-bhan commented Jul 9, 2022

arthurbolsoni commented Oct 6, 2022 • edited Loading

murat1999 commented Dec 15, 2022

arthurbolsoni commented Dec 15, 2022 • edited Loading

murat1999 commented Dec 15, 2022 • edited Loading

Jumpjetjumpjet commented Jan 19, 2023 • edited Loading

"browser_action": { "default_icon": "crash.png", "default_title": "Crash Bot" }, "web_accessible_resources": ["content.js"], "permissions": [ "https:///", "http:///", "tabs" ] }

Veverke commented May 6, 2020 •

edited

Loading

AnthonyisMedia commented Jun 17, 2020 •

edited

Loading

siddharthcpatel commented May 23, 2021 •

edited

Loading

nimatalebi commented Feb 7, 2022 •

edited

Loading

arthurbolsoni commented Oct 6, 2022 •

edited

Loading

arthurbolsoni commented Dec 15, 2022 •

edited

Loading

murat1999 commented Dec 15, 2022 •

edited

Loading

Jumpjetjumpjet commented Jan 19, 2023 •

edited

Loading

"browser_action": {
"default_icon": "crash.png",
"default_title": "Crash Bot"
},
"web_accessible_resources": ["content.js"],
"permissions": [
"https:///",
"http:///",
"tabs"
]
}