个人中心
gpt4 book ai didi

javascript - 在当前窗口中获取高亮文本并在弹出窗口中发送

转载 作者：行者123 更新时间：2023-11-30 05:51:57 26 4
gpt4 key购买 nike

我想制作一个使用弹出窗口的 chrome 扩展:

  1. 选择文字
  2. 点击 chrome 扩展程序图标
  3. 在弹出窗口中获取它(textarea，...)

这个问题已经在这里问过了，但是谷歌做了更新，我发现的代码不再工作了......

selection.js

    chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.method == "getSelection")
      sendResponse({data: window.getSelection().toString()});
    else
      sendResponse({}); // snub them.
});

popup.html

    <!DOCTYPE html> 
<html>
<head>
<style>
  body { width: 300px; }
  textarea { width: 250px; height: 100px;}
</style>
<script>


function pasteSelection() {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
      var text = document.getElementById('text'); 
      text.innerHTML = response.data;
    });
  });
}

function getSelectedText(){
   if (window.getSelection){
      var str = window.getSelection();
   }else if (document.getSelection){
      var str = document.getSelection();
   }else {
      var str = document.selection.createRange().text;
   }
   return str;
}

function affichage(){
var sel = getSelectedText();
alert(sel);
}

function addtext() {
    document.form.champ.value = getSelectedText();
}

</script>
</head>
<body>
<form>
<textarea id="text"></textarea>
<button onclick="pasteSelection(); " type="submit">get text</button>
</form>
</body>
</html>

list .json

 {
 "name": "Selected Text",
 "version": "0.1",
 "description": "Selected Text",
 "options_page": "page_options.html",
 "browser_action": {
   "default_title": "Selected Text",
   "default_icon": "icon.png",
   "default_popup": "popup.html" 
 },
 "permissions": [
   "tabs",
   "chrome://favicon/",
   "http://*/*", 
   "https://*/*"
 ],
 "content_scripts": [
  {
    "matches": ["http://*/*"],
    "js": ["selection.js"],
    "run_at": "document_start",
    "all_frames": true
  }
 ],
 "manifest_version": 2
}

在此先感谢您的帮助:)

最佳答案

你的脚本有多个问题

  • chrome.extension.onRequest 已弃用，取而代之的是 chrome.extension.onMessage
  • chrome.tabs.sendRequest 已弃用，取而代之的是 chrome.tabs.sendMessage
  • CSP 不允许内联脚本和 <script> html 代码中的标记。
  • Content Script 的窗口对象不同于普通的页面窗口对象。

在对代码应用多个更改后，我让它工作了

list .json

删除了 list 中不适用的部分

{
 "name": "Selected Text",
 "version": "0.1",
 "description": "Selected Text",
 "browser_action": {
   "default_title": "Selected Text",
   "default_popup": "popup.html" 
 },
 "permissions": [
   "tabs",
   "http://*/*", 
   "https://*/*"
 ],
 "content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["selection.js"],
    "run_at": "document_start",
    "all_frames": true
  }
 ],
 "manifest_version": 2
}

popup.html

确保 popup.html遵守CSP

<!DOCTYPE html>
<html>

    <head>
        <style>
            body {
                width: 300px;
            }
            textarea {
                width: 250px;
                height: 100px;
            }
        </style>
        <script src="popup.js"></script>
    </head>

    <body>
        <textarea id="text"></textarea>
        <button id="submit">get text</button>
    </body>

</html>

弹窗.js

用于选择当前选项卡并发送消息和更新 DOM 的脚本。

function pasteSelection() {
    //Select current tab to send message
    chrome.tabs.query({
        "active": true,
        "currentWindow": true,
        "status": "complete",
        "windowType": "normal"
    }, function (tabs) {
        //It returns array so looping over tabs result
        for (tab in tabs) {

            //Send Message to a tab
            chrome.tabs.sendMessage(tabs[tab].id, {
                method: "getSelection"
            });
        }
    });
}
//Adding a handler when message is recieved from content scripts
chrome.extension.onMessage.addListener(function (response, sender) {

    //Set text to text area
    var text = document.getElementById('text');
    text.value = response.data;
});

// Bind On click event to pasteSelection() function
document.addEventListener("DOMContentLoaded", function () {

    document.getElementById("submit").onclick = pasteSelection;
});

选择.js

将选定的文本传递给 popup.html 

 //Add a handler to handle message sent from popup.html
 chrome.extension.onMessage.addListener(function (request, sender) {
     //Hanlde request based on method
     if (request.method == "getSelection")
     //Send selected text back to popup.html
     chrome.extension.sendMessage({
         data: document.getSelection().toString()
     });
     else chrome.extension.sendMessage({}); // snub them.
 });

引用资料

关于javascript - 在当前窗口中获取高亮文本并在弹出窗口中发送，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14203551/

26 4 0
文章推荐： javascript - Google Earth API - 转换 ED50/WGS84
文章推荐： javascript - 如何在 AJAX foreach JSON 返回调用中引入延迟和淡入
文章推荐： javascript - knockout JS : property specific css binding expression
文章推荐： javascript - angularjs - 表单和验证
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com