Disable chrome extension

Question

i am creating an chorme extension in which extension will change the color of facebook. i have added a button and i only want it to make facebook black whenever it is clicked. i have already created the button with on click property. how can i disable my app by clicking on it? here is my code

popup.html

  </head>
  <body>

<button onclick="myFunction()">Click Me</button>


  </body>
</html>

code.js

function myFunction() {
    //what should i write here?//
}

menifest.json

{
   "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html",
      "default_title": "Black Facebook"
   },
   "content_scripts": [ {
      "css": [ "facebook-bw.css" ],
      "matches": [ "https://www.facebook.com/*" ]
   } ],
   "description": "Black Theme has been activated",

   "manifest_version": 2,
   "name": "Black Facebook",
   "version": "0.1.0"
}

First you say you want to change color of facebook. Then you say `how can i disable my app by clicking on it?`. I am confused. — Vanity Slug - codidact.com, Sep 29 '17 at 16:25
Possible duplicate of [how to make on/off buttons/icons for a chrome extension?](https://stackoverflow.com/questions/16136275/how-to-make-on-off-buttons-icons-for-a-chrome-extension) — rlemon, Sep 29 '17 at 17:32

score 0 · Answer 1 · answered Sep 29 '17 at 16:25

0

You should be able to declare your script as a background script in the manifest.json file and in the script have a listener like:

chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript(null, {file: "script.js"});
});

And that script.js would handle parsing the page and changing colors (I did something similar except was parsing the text on the page with a regex to look for key words.

Here's a good reference: Run script each time Chrome extension icon clicked

answered Sep 29 '17 at 16:25

Stephen Tetreault

769
1
8
26

i am new in js. can you please explain how to declare my script as bg script? – user8494167 Sep 29 '17 at 16:29
In the manifest.json you can have a block like this: `"background": { "scripts": ["src/js/background.js"] },` @user8494167 – Stephen Tetreault Sep 29 '17 at 16:32
what will i write in backgroung.js? – user8494167 Sep 29 '17 at 16:37
I have already written the code which will change the color in manifest file "content_scripts": [ { "css": [ "facebook-bw.css" ], "matches": [ "https://www.facebook.com/*" ] } ], – user8494167 Sep 29 '17 at 16:39
You need to traverse the DOM checking the elements you want to alter the CSS on. A hackier fast version would be figuring out what elements you need to alter the CSS on beforehand and in script.js you just alter their color from the facebook blue to the black you want. – Stephen Tetreault Sep 29 '17 at 16:39
i have already alter the css. how can i write that in background.js? – user8494167 Sep 29 '17 at 16:41
I can't explain to you selecting elements in JS and changing `style.color` and `style.backgroundColor` in a comment :) but researching "selecting elements in vanilla javascript" and "changing css in vanilla javascript" and you'll have your answers :) – Stephen Tetreault Sep 29 '17 at 16:42
i have created an seprate css file.. any way i can use that? – user8494167 Sep 29 '17 at 16:45
I've not used the CSS approach you're trying to use before, but maybe research "chrome extension add css to a page" and you might have some luck finding a solution – Stephen Tetreault Sep 29 '17 at 16:46

Disable chrome extension

1 Answers1