CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Hick
Hick

Reputation: 36404

How to make a popup ride over a html page using chrome extension?

Just like Pocket chrome app does it, where when you save a page, it shows a drag down/popup that shows that you've added the link to Pocket.

How is it possible to achieve something similar?

To give a visual example: enter image description here

Upvotes: 0

Views: 242

Answers (1)

gkalpak
gkalpak

Reputation: 48211

You can use Programmatic Injection to inject and execute some JS code that modifies the web-pages DOM apropriately.

// In `background.js`:
...
var jsCode = [
    "var div = document.createElement('div');",
    "div.innerHTML = '...';",
    "div.style.position = 'fixed';",
    "div.style.zIndex = '9999';",
    "document.body.appendChild(div);"
].join("\n");
function injectPopover(tabId) {
    chrome.tabs.executeScript(tabId, {
        code: jsCode
    });
}

You will, also, need to set the necessary permissions in your menifest.json depending on when/how you want your popover to be triggered (and on what web-pages).

If you are not familiar with the basic concepts of Chrome Extensions, the Getting-Started Guide it the place to...start.

Upvotes: 1

Related Questions