CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome-extension
Saurabh Shirodkar
Saurabh Shirodkar

Reputation: 334

Chrome extension button popup

I want to create a chrome extension to add a button to a particular page, and upon clicking that button, I want a popup to appear as shown on https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

I have used content script, I've included the css stuff from that link in a .css file, and I have a .js file for the content script that injects a button on the screen.

My button is appearing on the screen. What I want to know is, how do I get the popup as shown in the link to appear? They have used an html file in the link, but I am making changes in an already existing html page through a content script. So how do I go about it?

My .js file for content script:

var button = document.createElement("button");
//button description

var body = document.getElementsByClassName("htmlclassname")[0];
body.insertBefore(button, body.childNodes[0]);
//Button appearing properly

button.addEventListener("click", function() {
    //What code do I put here to get a popup like in the link??????
});

Upvotes: 4

Views: 3543

Answers (2)

Keith
Keith

Reputation: 155862

You need to inject all the DOM for your popup, as well as the button.

You can do this in the click event for the button:

var button = document.createElement('button');
button.innerText = 'Show Popup';
button.style.position = 'relative';

document.querySelector('body').appendChild(button);

button.addEventListener('click', function(e) {
  var popup = document.querySelector('#myPopup');
  if (!popup) {
    popup = document.createElement('div');
    popup.style.visibility = 'hidden';
    popup.style.width = '160px';
    popup.style.backgroundColor = '#555';
    popup.style.color = '#fff';
    popup.style.textAlign = 'center';
    popup.style.borderRadius = ' 6px';
    popup.style.padding = '8px 0';
    popup.style.position = 'absolute';
    popup.style.zIndex = '1';
    popup.style.bottom = '125%';
    popup.style.left = '50%';
    popup.style.marginLeft = '-80px';
    popup.innerText = 'A Simple Popup!';
    popup.id = 'myPopup';
    button.appendChild(popup);
  }

  if (popup.style.visibility === 'hidden')
    popup.style.visibility = 'visible';
  else
    popup.style.visibility = 'hidden';
});
<div>Content already in page.
  <p>blah blah blah</p>
</div>

Upvotes: 2

Teyam
Teyam

Reputation: 8112

You may want to check Getting Started: Building a Chrome Extension which shows how you can implement opening a popup window after clicking an icon. As mentioned in the given link, the actual logic of rendering the content of the popup is implemented by popup.js.

Then, after you've got your first extension up and running, you can fiddle your code with things exactly how you want it like setting a tooltip on the browser action button.

Tooltips can be set by specifying the default_title key in the manifest file. Open manifest.json, and add the default_title key to the browser_action. Make sure that the JSON is valid, so quote the key and add a comma where necessary.

Sample code:

{
  ...
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Click here!"
  },
  ...
}

Suggested solution in this related SO post might also help.

Upvotes: 0

Related Questions