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