How to setup link between page and chrome extension?

A

Astral1004982020-08-18 22:56:38

JavaScript

Astral100498, 2020-08-18 22:56:38

Good afternoon. I am creating my own extension. The essence is simple, the output of the selected text on the screen, by pressing a button. Or replace the selected text. This functionality works great in the extension window. But, how can I make my extension work with different pages. (That is, I select text on some site, click on the button and it is displayed). How to set up a connection between them. I would be very grateful. Here is my code.

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>