CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
Dmitry
Dmitry

Reputation: 1105

How to add popup/bubble?

I tryed make demo chrome extension. Logic: Extension gets selected text (after context menu click) and show it in a popup window, like this (TmTranslator img for example): enter image description here

My code:

chrome.contextMenus.create({ //add context menu 
    id: "myContextMenu",
    title: "Get Text",
    contexts:["selection"],
    onclick: createPopup
});
function createPopup(info){ 
    var selText = info.selectionText; //Get selected text
    //Now, how to add bubble with selected text???
}

Upvotes: 0

Views: 604

Answers (1)

gkalpak
gkalpak

Reputation: 48211

Since the background page is notified about the context-menu event and the DOM you want to manipulate is that of the web-page, you'll need to have the background-page inject some code into the corresponding tab, e.g. using chrome.tabs.executeScript(). E.g.:

function createPopup(info){ 
    var selText = info.selectionText; //Get selected text
    //Now, how to add bubble with selected text???
    chrome.tabs.executeScript({
        code: 'alert("' + selText + '");'
    });
}

Your injected code or file would be more complex of course, but you get the idea.

Things to keep in mind:

  • In order to be able to inject code into a web-page, you need to declare the appropriate host match pattern in your permissions section in manifest.

  • If the interaction with the web-page is frequent, it might be preferrable to inject a content-script once and then communicate with it using Message Passing.

Upvotes: 1

Related Questions