0

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

Hick
  • 35,524
  • 46
  • 151
  • 243

1 Answers1

1

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.

gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • I am familiar with it, but I am just not sure how to inject an entire html page and not just html string. Maybe injecting an iframe would be the way to go? – Hick Nov 25 '13 at 12:13
  • Why inject an entire page ? If you want a popover, you just inject the JS that modifies the existing page's DOM to add (and then hide) the popover. If the code you want to inject is lengthy, you can inject a script instead, e.g.: `chrome.tabs.executeScript(tabId, {file: "relative/path/to/myscript.js"}); – gkalpak Nov 25 '13 at 12:18
  • Because I was a bit confused about the security rules and whether it is a great idea to inject scripts in itself. Wont injecting an entire page give me a better control over the UI that I want to displayed? – Hick Nov 25 '13 at 12:53
  • Injecting a page doesn't make sense (maybe you have something else in mind). Either inject some JS (to manipulate the original DOM) or **open** a new page/**replace** the original (with what ever content you want it to have). But the second case is **not** a popover. The advantage of injecting JS into the orifinal page is that it is more clear for the user (you don't navigate away from the page) and you can clean-up on yourself (e.g. have a close button that removes your popover and leaves the original page intact, so the user can continue doing what (s)he was doing. – gkalpak Nov 25 '13 at 12:59
  • Ah. That's a great example. One final question: How does the document variable know which tab I'm talking about to do changes to the html? Shouldn't I pass some kind of tabId to make it work? – Hick Nov 25 '13 at 13:01
  • I figured it out myself. Though there is a tiny js bug in your code. I was following the examples here: http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script and it was giving me a CSP error. – Hick Nov 25 '13 at 13:10
  • If you found an error please let me know, so I can correct it for others. (I already corrected a couple of wrong quotes.) – gkalpak Nov 25 '13 at 15:48