Не получается настроить связь между страницей и расширением chrome

Question

Создаю свое расширение. Суть простая, вывод выделенного текста на экран, по нажатию на кнопку. Либо замена выделенного текста. Данный функционал прекрасно работает в окне расширения. Но, как мне сделать, чтобы мое расширение работало с различными страницами.(То есть я выделяю на каком нибудь сайте текст, нажимаю на кнопку и оно выводится) . Как настроить связь между ними. Буду очень признателен. Вот мой код.

manifest.jsom

'{
   "background": {
      "page": "background.html"
      
   },
   "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],       
      "js": ["jquery-3.3.1.min.js","popup_script.js"],
      "run_at": "document_end",
      "api": [ "devtools", "tabs" ]
    }
   ],
   "web_accessible_resources": [
    "background.js"
   ],
   "browser_action": {

      "default_popup": "popup.html",
      "default_title": "Test 123"
   },
   "content_security_policy": "script-src 'self'; media-src *; object-src 'self'",
   "description": "Simple Test 123.",

   "manifest_version": 2,
   "minimum_chrome_version": "18",
   "name": "Test 123",
   "permissions": [ 
        "unlimitedStorage",
        "http://*/",
        "activeTab",
        "tabs",
       "notifications"
   ],

   "version": "2.6"
}'

popup_script.js

`

var video_el = document.getElementById('321');
  var button = document.getElementById('456');

    if (video_el !== null) {
            video_el.addEventListener('click',function(){swapSelection("night");});
    }if (button !== null) {
    button.addEventListener('click',function(){getSelectionFragment();});
    }

    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);
      }
    }

  
  
    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)//  просто выведет выделенный текст без тегов 
if (selectedText && selectedText.rangeCount > 0) {
       
                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; 
}


var port = chrome.extension.connect({
      name: "Sample Communication"
 });
 port.postMessage("Hi BackGround");
 port.onMessage.addListener(function(msg) {
      console.log("message recieved" + msg);
 });'

background.js

'

alert("this is script");

chrome.extension.onConnect.addListener(function(port) {
      console.log("Connected .....");
      port.onMessage.addListener(function(msg) {
           console.log("message recieved" + msg);
           port.postMessage("Hi Popup.js");
      });
 })
// Make a simple request:`

background.html

'<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body><script type="text/javascript" src="background.js"></script>
  </body>


</html>'

popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
    body
      {
        min-width: 250px;
        margin: 400px;
        height: 350px;
        font-family: Segoe UI, Arial, sans-serif;
        font-size: 13px;
        background-color: #f8f6f2;
      }
</style>
  </head>
  <body>
    <p>NAME name name</p>

        <button id="321">Zamena</button>
        <button id="456">VUVOD</button>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="popup_script.js"></script>
    
  </body>

</html>'

БЛОГ НА HUSL

Не получается настроить связь между страницей и расширением chrome

Ответы (0 шт):