0

I'm creating a chrome extension to store the texts highlighted by the user and turn it available on the popup of the extension. I'm trying to store the highlight texts (strings) in the chrome storage with sync or local, and then get it in the popup. Also, I created an array to store the strings.

Any suggestion or best practice to do that, using chrome storage? Or is better to do it through messaging? (sending the array of strings to popup)

Manifest.json

    {
  "manifest_version": 2,
  "name": "Information Hoover",
  "version": "0.1",
  "description": "Grab and store knowledge around the web",
  "permissions": ["activeTab", "tabs", "declarativeContent", "storage", "contextMenus"],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "get highlighted text"
  },

  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["content.js"]
    }
  ]
}

Content.js


let texts = [];

window.addEventListener('mouseup', getSelectionText);

function getSelectionText(){
  let selectedText = window.getSelection().toString();

    if (selectedText.length > 0){ // check there's some text selected

      let message = {
        text: selectedText
      };
      //chrome.runtime.sendMessage(message);

      texts.push(selectedText);

      console.log(message);
    }      
}

Background.js

chrome.runtime.onMessage.addListener(receiver);

let highlightedTexts = [];

function receiver(request, sender, sendResponse) {
  sentence = request.text;
  highlightedTexts.push(sentence);

  console.log(highlightedTexts);
}

popup.js

function setup() {
  let bgpage = chrome.extension.getBackgroundPage();
  let texts = [];
  let word = bgpage.sentence;
  texts.push(word);

  document.querySelector('.selectedtext').innerHTML = word;
  console.log(texts);
}

setup();

popup.html

<!DOCTYPE html>  
<html lang="en">  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>  
    <link rel="stylesheet" type="text/css" href="styles.css">  
  </head>  
  <body> 
    <div class="selected-text-area">
        <p class="selectedtext"> </p> 
    </div>

    <script src="popup.js"></script>  
  </body>  
</html>
Bruno
  • 93
  • 1
  • 1
  • 4
  • If the question is how to use chrome.storage, look at the [docs](https://developer.chrome.com/extensions/storage). This essentially looks like `chrome.storage.sync.set({"key":"value"})` in your popup script. If this question is asking which method you should use to maintain state in your extension, you should probably reword it as questions that generate opinion-based answers are discouraged. – Ross Jacobs Mar 26 '20 at 00:47
  • 1
    1) No need for background.js at all, you can store the text in the content script using chrome.storage.local. 2) No need to store it if the goal is to show it in the popup: you can simply use messaging. 3) Use `selectionchange` event to also process keyboard. 4) No need to use any DOM events at all if the goal is to show the selection only after the icon is clicked: you can just get it in onMessage listener and send the result back. – wOxxOm Mar 26 '20 at 06:29
  • @wOxxOm so I can send it directly to the pop through messaging? On each page the user can highlight a lot of texts, how can the popup request from the content.js an array or an object with the updated texts? Can you give one example how i can do that? Note: I'm new to programming and a self learner and i lack a lot of concepts... – Bruno Mar 26 '20 at 22:45
  • 1
    Yes, see [messaging](https://developer.chrome.com/extensions/messaging#simple) (2nd and 3rd code blocks): the popup sends a message to the tab, the content script's onMessage listener collects the text and returns it via sendResponse. – wOxxOm Mar 27 '20 at 04:20
  • Thank @wOxxOm. Previously i've tried in the opposite way... just sending the message from the content to the popup. I'll try what you said, requesting with the popup, and then the content sends the response. I'll update news soon. – Bruno Mar 27 '20 at 17:32

0 Answers0