CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
NeS
NeS

Reputation: 147

Chrome extension overlay

I'm trying to make a chrome extension, but there's a few things I don't understand, and when I looked it up, I always end up with opposite advices, and nothing I manage to make work, so I'm seeking for your help.

Here's an exemple of the features I'd like to cover : Having an overlay I can show or hide with a chrome hotkey, on any page, containing the same text area, no matter which tab or page I'm in (I'm guessing I should use js to send the content of my text area into a variable global to every tabs or pages. I've also included jquery, but have to include it in every html, don't know how to include it somewhere that I can use for each pages I make.

What I need : - How to include an overlay - How to define a chrome hotkey for your extension - How to make global variable between every pages and tabs

Thanks

Upvotes: 1

Views: 2651

Answers (1)

NeS
NeS

Reputation: 147

Ok, I've solved almost all my problems now :

manifest.json : 

"commands": {
    "toggle-digivice": {
      "suggested_key": {
        "default": "Ctrl+Space"
      },
      "description": "Show or hide digivice"
    }
  },
  "background": {
    "page": "pages/background.html"
  }

background.js

chrome.commands.onCommand.addListener(function(command) {
  //alert(command);
  switch(command){
    case "toggle-digivice" :
      console.log("toggle");
      toggle_digivice();
    break;
  }
});

function toggle_digivice(){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(tabs[0].id,{file:"js/overlay.js"});
  });
}

overlay.js :

document.body.innerHTML += "<div id='overlay'>overlay.html</div>";

Now, I need to update my background overlay, and figure out how to call the content of my background to the innerHTML.

Upvotes: 2

Related Questions