After completing the tutorial on Chrome extensions from the Google Developer Chrome site, I decided to make my own extension. My idea is to create an extension that allows users to click on any sentence within a paragraph on a webpage and highlight it by simply clicking the browser action icon. However, I encountered an issue - once activated, the highlighting feature does not stop when switching tabs or navigating to another website. How can I solve this problem?
Below is the content of my manifest.json file:
{
"name": "Page Highlighter",
"description": "Make the current page red",
"version": "2.0",
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["style.css"],
"js": ["jquery-1.11.1.min.js", "myscript.js"]
}
],
"browser_action": {
"default_title": "highlight sentence on click"
},
"manifest_version": 2
}
In order to achieve the desired functionality, I included a jQuery file for using jQuery and created my own myscript.js file as shown below:
$(document).ready(function()
{
$('p').each(function() {
$(this).html($(this).text().split(/([\.\?!])(?= )/).map(
function(v){return '<span class=sentence>'+v+'</span>'}
));
});
$('.sentence').click(function(){
$(this).toggleClass("highlight")
});
});
The script above searches for text within paragraphs, splits them into sentences, and wraps each sentence in a span with the class "sentence" so that users can click on individual sentences to toggle the CSS class. The styling for highlighting the sentence in yellow is defined in the styles.css file as follows:
.highlight{
background: yellow;
}
Currently, clicking the browser action activates the extension and enables sentence highlighting. However, I am seeking a solution to ensure that the highlighting feature stops when switching tabs or navigating to a new website. How can I implement this functionality?