How to link the generated chrome extension to the page?

A

Astral1004982020-08-14 16:12:28

Google

Astral100498, 2020-08-14 16:12:28

Hello. I know how to create extensions for chrome. and hovered a bit.

I have a script that does two things. 1) Replacing the selected word 2) Displaying the selected word
I'm trying to embed this script in my extension so that it works on any site. But for some reason, zero response.

There are two buttons, but they do not react in any way to the selected text on the page. My guess: jquery is not loaded or there is no connection between the extension and the page. I don't know how correct this is. PLEASE HELP TO IMPLEMENT THIS PIECE Here is my manifest.json
code

{
    "name":"Simple Extention foe Google Chrome",
    "description":"Simple Extention for Google Chrome Browser",
    "version":"1.0",
    "manifest_version":2,
    "content_scripts":[
        {
            "all_frames": true,
            "api": [ "devtools", "tabs" ],
            "js":["jquery-3.3.1.min.js","script.js"],
            "matches": [ "\u003Call_urls>" ],
            "scriptable_host": [ "http://*/*", "https://*/*" ] 
        }
    ],
    "browser_action":{
        "default_popup":"popup.html"
    },
    "icons":{
        "128":"icon128.png"
    },
    "permissions": [
        "tabs"
    ],
    "background":{
        "scripts":["background.js"]
    }

}

popup.js

function swapSelection(swapText) {
  var sel = window.getSelection ? window.getSelection() : document.selection.createRange();
  if (sel != "") {
    if (sel.getRangeAt) {
      var range = sel.getRangeAt(0);
      var newNode = document.createElement("span");
      newNode.setAttribute('class', 'swapclass');
      range.surroundContents(newNode);
    } else {
      sel.pasteHTML('<span class="swapclass">' + sel.htmlText + '</span>');
    }
    $('.swapclass').replaceWith(swapText);
  }
}

$('button').click(function () {
  swapSelection("night");
});


 function getSelectionFragment(){
  var ie = false;
  if ( window.getSelection ) { 
    var selectedText = window.getSelection(); 
  } else if ( document.getSelection ) { 
    var selectedText = document.getSelection(); 
  } else if ( document.selection ) { 
    ie = true;
    var selectedText = document.selection.createRange(); 
  } 
  if(!ie){
    alert(selectedText)//  просто выведет выделенный текст без тегов 
    var theParent = selectedText.getRangeAt(0).cloneContents(); 
     // собственно выделенный кусок кода 
  }else{
 
    alert(selectedText.text) // текст
    alert(selectedText.htmlText) // выделенный кусок кода
  }
}
function toHTML(docFragment){ 
    var d = document.createElement('div'); 
    d.appendChild(docFragment);
    return d.innerHTML; 
}

popup.html

<html>
<title>Пример#1: получаем выделенный фрагмент страницы с помощью JS</title>
<head>

</head>
<body>
<span id="text">
world face qwerty
</span>


<button>ZAMENA</button>
<input type="button" onclick="getSelectionFragment()" value="VUVOD"/>



</body>
</html>