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>