javascript - How to apply class to the active tab page from chrome extension -

I'm developing in which a popup can choose a color scheme from the list given in the popup and open it in the Highlight tab. From one of the code snippets, I know that the background color changes by using code: "document.body.style.backgroundColor = 'red'" .

What are my steps

• Select the color scheme from the popup
• <00>
• < / Li>

popup.js

  Document.addEventListener ('DOMContentLoaded', function () {var li = document.querySelectorAll ('li'); for (var i = 0; i & lt; li .length; i ++) {li [i]. AddEventListener ('click', click;)}}); Function click (e) {// console.log (e.target.className); // gives the correct value chrome.tabs.executeScript (null, {code: "var scriptOptions = {param1: e.target.className};}}, function (e) {console.log ('clicked class') ; Console information (absolute 1); // does not say anything document.body.setAttribute ('class', e.target.className);}); window.close ();  

< Ul>
• How to get e.target.className inside the function (e)?

Again if I use Jquery it's that popup background Color changed, only see the code

  $ (function () {console.log ('jquery added'); $ (document) .on ('click', 'li', Function () {var cl = this.clas SName; $ ('body'). RemoveClass () AddClass (cl);});});  

Please tell me

• This Javascript What is the correct way to complete both in jQuery and

• How to get e.target.className inside the function?

We look at the following sample code:

<

  var a = 1; Function F (A) {Warning (A); } F (2);  

This is a simplified version of your problem. There is a variable a in the global field, but its function parameter By naming you a you are essentially creating a local variable of the same name.

In your code:

  function click (e) {// e is now clicked by (e) chrome.tabs.executeScript (tap, {code: "var Script option = {param1: e .target.className}; "}, function (e) {// e function (e)};); }  

The solution is simple: if you are not using the callback parameter of executeScript , then just use function () {/ * . As the callback ..

---

If I use jQuery, it only replaces the popup background color

Your code operates in the context of your popup; $ ('body') refers to the body of the popup; document.body - with executeScript is implemented in the callback popup.

To change the active tab, it should be done with content in that tab.

---

What is the correct way to accomplish this?

When you can simply inject the code, it is better to create the content which is a script Waits for

  // content.js (!! Injected) {// Make sure that it is executed only once injected = true; Chrome.runtime.onMessage.addListener (function (message, sender, sent dispatch) {if (message.action == "bodyClass") {document.body.setAttribute ('class', message.class);}}); }  

Then with the popup, you send the message again to this script:

  chrome.tabs.query ({active: true, currentWindow: true }, Function (tab) {// only active tabs should be allowed only Chrome tab.excute script (tab [0] .ID, {file: "content.js"}, function () {// Implemented in the popup, executing the script code // Therefore this message is ready for chrome.tabs.sendMessage (tab [0] .id, {action: "bodyClass", class: "example"});}); );  

If you need jQuery, you must first inject it:

  chrome.tabs.executeScript (tab [0] .id, { File: "Jquery.js"}, function () {chrome.tabs.executeScript (tab [0] .id, {file: "content.js"}, function () {/ * content script ready}}} < / Code> 

Alternatively, you can define the script in the manifest and not inject it every time, but it potentially removes the memory from the drain because it is injected into the tab Caste While not required.