@Astral100498

Как связать создаваемое расширение chrome со страницей?

Всем привет. Разбираюсь в создании расширений для хрома. и немного завис.

У меня есть скрипт который выполняет две функции. 1) Замена выделенного слова 2) Вывод на экран выделенного слова
Пытаюсь встроить этот скрипт в свое расширение, чтобы оно работало на любом сайте. Но почему то ноль реакции.

Две кнопки есть, но они никак не реагируют на выделяемый текст на странице. Мои догадки: не подгружается jquery или нету связи между расширением и страницей. Не знаю насколько это правильно. ПРОШУ ПОМОЩИ ПОМОЧЬ РЕАЛИЗОВАТЬ ДАННЫЙ КУСОК
Вот мой код manifest.json
{
    "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>
  • Вопрос задан
  • 108 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
24 нояб. 2024, в 18:08
1000 руб./за проект
24 нояб. 2024, в 17:52
3000 руб./за проект
24 нояб. 2024, в 16:14
1000 руб./за проект