Get Highlight Text In Current Window And Send It In A Popup

February 28, 2024 Post a Comment

I would like to make a chrome extension that use a popup to do : select text click on the chrome extension icon get it in the popup (textarea, ...) This question was already as

Solution 1:

There are multiple problems in your script

chrome.extension.onRequest is deprecated in favor of chrome.extension.onMessage
chrome.tabs.sendRequest is deprecated in favor of chrome.tabs.sendMessage
CSP will not allow inline scripting and <script> tag in html code.
window object of Content Script is different from normal page window object.

After applying multiple changes to code i got it working

manifest.json

Eliminated not applicable sections of manifest

{"name":"Selected Text","version":"0.1","description":"Selected Text","browser_action":{"default_title":"Selected Text","default_popup":"popup.html"},"permissions":["tabs","http://*/*","https://*/*"],"content_scripts":[{"matches":["<all_urls>"],"js":["selection.js"],"run_at":"document_start","all_frames":true}],"manifest_version":2}

popup.html

Ensured popup.html adheres to CSP

<!DOCTYPE html><html><head><style>body {
                width: 300px;
            }
            textarea {
                width: 250px;
                height: 100px;
            }
        </style><scriptsrc="popup.js"></script></head><body><textareaid="text"></textarea><buttonid="submit">get text</button></body></html>

popup.js

Script to pick current tab and send message and update DOM.

functionpasteSelection() {
    //Select current tab to send message
    chrome.tabs.query({
        "active": true,
        "currentWindow": true,
        "status": "complete",
        "windowType": "normal"
    }, function (tabs) {
        //It returns array so looping over tabs resultfor (tab in tabs) {

            //Send Message to a tab
            chrome.tabs.sendMessage(tabs[tab].id, {
                method: "getSelection"
            });
        }
    });
}
//Adding a handler when message is recieved from content scripts
chrome.extension.onMessage.addListener(function (response, sender) {

    //Set text to text areavar text = document.getElementById('text');
    text.value = response.data;
});

// Bind On click event to pasteSelection() functiondocument.addEventListener("DOMContentLoaded", function () {

    document.getElementById("submit").onclick = pasteSelection;
});

selection.js

Passes selected text to popup.html

//Add a handler to handle message sent from popup.html
 chrome.extension.onMessage.addListener(function (request, sender) {
     //Hanlde request based on methodif (request.method == "getSelection")
     //Send selected text back to popup.html
     chrome.extension.sendMessage({
         data: document.getSelection().toString()
     });
     else chrome.extension.sendMessage({}); // snub them.
 });

javascript edu