помогите с расширением пожалуста

это расширение выделяет три слова на любой странице (яблоко,лимон,киви)но вот проблема когда эти значения ввёдаться в гугле или в любом другом поисковике происходит вот это

вот js код

let re = /Яблоко/gi;
let re2 = /Лимон/gi;
let re3 = /Киви/gi;
let str = document.documentElement.innerHTML;
str = str.replace(re, '<span class="red">Яблоко</span>');
str = str.replace(re2, '<span class="yellow">Лимон</span>');
str = str.replace(re3, '<span class="green">Киви</span>');
document.documentElement.innerHTML = str;

вот манифест

{
"manifest_version": 2,
"name": "Designate",
"description": "Designate text",
"version": "1.0",
"browser_action": {      
    "default_popup": "popup.html"
},
"content_scripts": [
{
  "matches": ["<all_urls>"],
  "css": ["my.css"],
  "js": ["jquery-3.3.1.js","popup.js"],
   "run_at":    "document_end"
}

],

"icons": { "16": "letter.png",
           "48": "letter.png",
           "128": "letter.png" }       

}

классы просто задают цвет если кто поможет буду очень благодарен ибо я в тупике заранее спасибо кто не полениться и поможет)