近在網(wǎng)上流行的chatgpt，實(shí)在是太火了，好多人在使用，而且它的用處實(shí)在是太豐富了，能幫助我們解決很多問(wèn)題，就比如說(shuō)：編程，生成圖片，翻譯等。太豐富了。我看網(wǎng)上很多人都在說(shuō)，它可以幫助人開(kāi)發(fā)軟件，在沒(méi)有相關(guān)編程語(yǔ)音的基礎(chǔ)上都能把軟件做出來(lái)，于是我也思考了一個(gè)場(chǎng)景，想讓他幫我實(shí)現(xiàn)一下瀏覽器插件的劃詞翻譯。結(jié)果真的實(shí)現(xiàn)了，而且在瀏覽器上也跑起來(lái)了，真的是太興奮了。我在想是不是以后都不需要程序員了，這個(gè)職業(yè)會(huì)不會(huì)馬上就被替代掉，以下是我跟chatgpt的交流內(nèi)容：

1、我想編寫(xiě)一個(gè)edge 擴(kuò)展插件，使用這個(gè)插件主要用來(lái)翻譯文本內(nèi)容，使用插件的操作，1，edge 擴(kuò)展在選中的段落文字下方，加入div顯示，翻譯的話，要翻譯成中文。能提供一些示例代碼嗎？

然后它告訴我，我如果想寫(xiě)一個(gè)插件到底需要準(zhǔn)備哪些文件， manifest.json 文件中添加

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "contextMenus"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content_script.js"
      ]
    }
  ]
}

在 content_script.js文件中監(jiān)聽(tīng)mousedown事件，以便在用戶選定段落文字時(shí)觸發(fā)。

document.addEventListener('mousedown', function(event) {
  var selectionText = window.getSelection().toString();
  if (selectionText) {
    // 在此處添加代碼以顯示您的 DIV。
  }
});

創(chuàng)建一個(gè)div元素并將其添加到文檔中。您可以使用以下代碼：

document.addEventListener('mousedown', function(event) {
  var selectionText = window.getSelection().toString();
  if (selectionText) {
    var div = document.createElement('div');
    div.innerHTML = '您要顯示的文本。';
    div.style.position = 'absolute';
    div.style.top = event.pageY + 'px';
    div.style.left = event.pageX + 'px';
    document.body.appendChild(div);
  }
});

在此示例中，我們?cè)?mousedown 事件處理程序中創(chuàng)建了一個(gè) div 元素，并將其添加到文檔中。請(qǐng)注意，我們使用 event.pageX 和 event.pageY 屬性來(lái)設(shè)置 div 元素的位置，以便該元素出現(xiàn)在用戶點(diǎn)擊的位置下方。 4. 樣式 DIV。您可以使用 CSS 樣式為 div 元素設(shè)置透明度、邊框樣式、字體大小等。

document.addEventListener('mousedown', function(event) {
  var selectionText = window.getSelection().toString();
  if (selectionText) {
    var div = document.createElement('div');
    div.innerHTML = '您要顯示的文本。';
    div.style.position = 'absolute';
    div.style.top = event.pageY + 'px';
    div.style.left = event.pageX + 'px';
    div.style.backgroundColor = 'white';
    div.style.border = '1px solid black';
    div.style.padding = '5px';
    div.style.fontSize = '14px';
    div.style.fontFamily = 'Arial';
    document.body.appendChild(div);
  }
});

根據(jù)您的需求和設(shè)計(jì)，您可以通過(guò)調(diào)整 CSS 樣式來(lái)自定義 div 元素的外觀。 希望這些步驟對(duì)您有所幫助！

然后我復(fù)制完代碼就放到我的插件包里面，使用瀏覽器加載一下插件，就出現(xiàn)了提示信息，果真可以直接使用，但是提示框我劃詞一下， 就出現(xiàn)一個(gè)，太多提示框，于是我問(wèn)出了下面的問(wèn)題

2、我實(shí)現(xiàn)了這個(gè)效果，但是當(dāng)我在移動(dòng)鼠標(biāo)的時(shí)候又出現(xiàn)了div，頁(yè)面上出現(xiàn)了好多的div提示框，能不能把之前的提示框都關(guān)掉呢，當(dāng)我點(diǎn)擊新的文本的時(shí)候

是的，您可以在創(chuàng)建新的提示框之前，清除先前的提示框。為此，您可以使用 document.querySelectorAll() 方法獲取先前創(chuàng)建的所有提示框，并使用 Array.from() 方法將其轉(zhuǎn)換為數(shù)組，然后使用 forEach() 方法循環(huán)遍歷這些提示框，并使用 remove() 方法從文檔中刪除它們。 以下是更新后的代碼，它添加了一些功能以清除先前創(chuàng)建的提示框：

document.addEventListener('mousedown', function(event) {
  var selectionText = window.getSelection().toString();
  if (selectionText) {
    // 查找并刪除先前創(chuàng)建的所有提示框
    var oldDivList = Array.from(document.querySelectorAll('.my-extension-div'));
    oldDivList.forEach(function(divElement) {
      divElement.remove();
    });
    // 創(chuàng)建一個(gè)新的提示框
    var div = document.createElement('div');
    div.className = 'my-extension-div';
    div.innerHTML = '您要顯示的文本。';
    div.style.position = 'absolute';
    div.style.top = event.pageY + 'px';
    div.style.left = event.pageX + 'px';
    div.style.backgroundColor = 'white';
    div.style.border = '1px solid black';
    div.style.padding = '5px';
    div.style.fontSize = '14px';
    div.style.fontFamily = 'Arial';
    document.body.appendChild(div);
  }
});

在這個(gè)更新的代碼中，我們首先使用 document.querySelectorAll() 方法獲取所有具有 "my-extension-div" 類名的 div 元素，并將其轉(zhuǎn)換為數(shù)組。然后，使用 forEach() 方法遍歷該數(shù)組，并使用 remove() 方法從文檔中刪除該元素。 最后，我們創(chuàng)建了一個(gè)新的提示框，并為該元素設(shè)置了 "my-extension-div" 類名。這將使我們能夠隨時(shí)找到并刪除該元素。 希望這個(gè)更新的代碼可以幫助您解決問(wèn)題！

我大概知道它的意思了，它的意思是我需要設(shè)置一下className，然后根據(jù)className找到所有的提示框，在鼠標(biāo)事件觸發(fā)的時(shí)候把其余的提示框刪除掉，但是里面還有很多我不知道的函數(shù)，我不知道怎么拿到當(dāng)前的選中的文本信息，但是我看到代碼里面有一段代碼，我繼續(xù)問(wèn)道。

3、如何獲取當(dāng)前選中的html信息

要獲取當(dāng)前選中文本的 HTML 信息，您可以使用 Range 對(duì)象。 Range 對(duì)象表示文檔中的一段區(qū)域，可以包含一個(gè)或多個(gè)節(jié)點(diǎn)，并允許您對(duì)這些節(jié)點(diǎn)進(jìn)行選擇和編輯。 在 Edge 擴(kuò)展中，您可以通過(guò) window.getSelection() 方法獲取當(dāng)前選中的文本所在的節(jié)點(diǎn)，然后使用 getRangeAt() 方法獲取包含文本的 Range 對(duì)象。最后，您可以使用 cloneContents() 方法將 Range 中包含的節(jié)點(diǎn)的副本作為 DocumentFragment 對(duì)象返回，并將其插入到新創(chuàng)建的 div 元素中，以顯示為 HTML。 以下是一個(gè)示例代碼，用于獲取當(dāng)前選中文本的 HTML 信息：

document.addEventListener('mousedown', function(event) {
  var selectionText = window.getSelection().toString();
  if (selectionText) {
    var range = window.getSelection().getRangeAt(0);
    var div = document.createElement('div');
    var fragment = range.cloneContents();
    div.appendChild(fragment);
    document.body.appendChild(div);
  }
});

在這個(gè)代碼中，我們首先獲取當(dāng)前選中的文本，并檢查是否有選中的文本。然后，我們使用 getRangeAt() 方法獲取 Range 對(duì)象，并使用 cloneContents() 方法從 Range 對(duì)象中提取文本節(jié)點(diǎn)。接下來(lái)，我們將提取的文本節(jié)點(diǎn)副本插入到一個(gè)新創(chuàng)建的 div 元素中，并將該元素添加到文檔中，以顯示為 HTML。 希望這可以幫助您獲取并顯示當(dāng)前選中文本的 HTML 信息。

好了我大概知道怎么操作了，那之后我肯定就得接入翻譯api了，那我怎么接入翻譯api呢，于是我找了百度的翻譯接口，直接把示例扔給了chatgpt

4、把相關(guān)的百度翻譯的接口給了chatgpt,如下

接入舉例
例如：將英文單詞 apple 翻譯成中文：
請(qǐng)求參數(shù)：
q=apple
from=en
to=zh
appid=2015063000000001（請(qǐng)?zhí)鎿Q為您的appid）
salt=1435660288（隨機(jī)碼）
平臺(tái)分配的密鑰: 12345678
生成簽名sign：
Step1. 拼接字符串1：
拼接appid=2015063000000001+q=apple+salt=1435660288+密鑰=12345678得到字符串1：“2015063000000001apple143566028812345678”
Step2. 計(jì)算簽名：（對(duì)字符串1做MD5加密）
sign=MD5(2015063000000001apple143566028812345678)，得到sign=f89f9594663708c1605f3d736d01d2d4
拼接完整請(qǐng)求：
http://api.fanyi.baidu.com/api/trans/vip/translate?q=apple&from=en&to=zh&appid=2015063000000001&salt=1435660288&sign=f89f9594663708c1605f3d736d01d2d4
注：也可使用 POST 方式，如 POST 方式傳送，Content-Type 請(qǐng)指定為：application/x-www-form-urlencoded
麻煩生成一下edge擴(kuò)展的代碼示例

好的，以下是一個(gè)將選中的單詞使用百度翻譯 API 將其從英文翻譯為中文的 Edge 擴(kuò)展示例代碼：

// 獲取當(dāng)前選中的文本
function getSelectedText() {
  let selection = window.getSelection();
  if (selection && selection.rangeCount && selection.toString()) {
    return selection.toString();
  }
  return null;
}
// 發(fā)送翻譯請(qǐng)求
function translate(word) {
  const appid = 'YOUR_APP_ID'; // 替換成自己的 APP ID
  const key = 'YOUR_KEY'; // 替換成自己的密鑰
  const salt = Date.now().toString();
  const sign = md5(appid + word + salt + key); // 使用 md5 加密生成簽名
  const url = `http://api.fanyi.baidu.com/api/trans/vip/translate?q=${encodeURIComponent(word)}&from=en&to=zh&appid=${appid}&salt=${salt}&sign=${sign}`;
  return fetch(url).then(response => response.json());
}
// 在頁(yè)面上添加提示框
function addTooltip(text, target) {
  const tooltip = document.createElement('div');
  tooltip.innerHTML = text;
  tooltip.style.cssText = `
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    padding: 0.5rem;
    font-size: 1rem;
    background-color: #fff;
    border: 1px solid #aaa;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  `;
  document.body.append(tooltip);
  // 計(jì)算提示框位置
  const rect = target.getBoundingClientRect();
  tooltip.style.top = `${window.pageYOffset + rect.top + rect.height}px`;
  tooltip.style.left = `${window.pageXOffset + rect.left + rect.width}px`;
  // 添加點(diǎn)擊事件，點(diǎn)擊以后自動(dòng)關(guān)閉提示框
  tooltip.addEventListener('click', () => tooltip.remove());
}
// 添加鼠標(biāo)選中事件監(jiān)聽(tīng)器
document.addEventListener('mousedown', async (event) => {
  // 如果選中文本為空，則不繼續(xù)執(zhí)行
  const selectedText = getSelectedText();
  if (!selectedText) {
    return;
  }
  // 如果選中文本包含空格，則不繼續(xù)執(zhí)行
  if (selectedText.includes(' ')) {
    return;
  }
  // 發(fā)送翻譯請(qǐng)求
  const translation = await translate(selectedText);
  const translationText = translation.trans_result[0].dst; // 獲取翻譯結(jié)果
  addTooltip(translationText, event.target); // 在頁(yè)面上添加提示框
});

注意，在使用百度翻譯 API 提交請(qǐng)求之前，需要將 YOUR_APP_ID 和 YOUR_KEY 替換為您自己的百度翻譯 API 的 APP ID 和密鑰，否則將會(huì)返回錯(cuò)誤的結(jié)果。另外，Edge 擴(kuò)展使用的是 Content Scripts，所以要注意在 manifest.json 文件中配置好權(quán)限和注入的頁(yè)面。

哇，它直接給我生成了全套的代碼，真是太豐富了，我直接拿代碼，覆蓋了我之前寫(xiě)的代碼，改了一下appid和key，在瀏覽器上實(shí)現(xiàn)一下，發(fā)現(xiàn)有錯(cuò)誤，于是我直接把錯(cuò)誤信息給了chatgpt

5、selectedText.includes

selectedText.includes() 是 JavaScript 字符串原型對(duì)象上的方法，用于判斷字符串中是否包含某個(gè)子字符串。如果包含，則返回 true，否則返回 false。 在這個(gè)例子中，因?yàn)槲覀冎幌敕g單個(gè)英文單詞，而不是短語(yǔ)或句子，所以我們需要判斷選中的文本是否包含空格或其他分隔符。如果包含分隔符，則意味著選中的是一個(gè)短語(yǔ)或句子，而不是單個(gè)單詞，此時(shí)我們不會(huì)發(fā)送翻譯請(qǐng)求。 具體來(lái)說(shuō)，selectedText.includes(' ') 的作用就是判斷選中文本中是否包含空格，如果包含，則返回 true，否則返回 false。如果返回 true，則說(shuō)明選中的文本是一個(gè)短語(yǔ)或句子，不是單個(gè)單詞，不會(huì)發(fā)送翻譯請(qǐng)求。

6、但是如果字符串中有空格的話，是不是也會(huì)返回true

是的，如果字符串中有空格或其他分隔符，includes() 方法也會(huì)返回 true，因?yàn)樽址写_實(shí)含有空格。因此，如果想要判斷選中的文本是否為單個(gè)單詞，我們需要使用更加嚴(yán)謹(jǐn)?shù)姆绞絹?lái)判斷。 一個(gè)常用的方法是使用正則表達(dá)式，例如下面的代碼：

function isWord(text) {
  return /^[a-zA-Z]+$/.test(text);
}

這個(gè)函數(shù)會(huì)檢查字符串 text 是否由一個(gè)或多個(gè)大小寫(xiě)字母組成。如果是，就說(shuō)明它是一個(gè)單詞，否則就不是。使用這個(gè)函數(shù)，我們就可以在代碼中更加準(zhǔn)確地判斷選中的文本是否為單詞：

// 添加鼠標(biāo)選中事件監(jiān)聽(tīng)器
document.addEventListener('mousedown', async (event) => {
  // 如果選中文本為空或包含空格，則不繼續(xù)執(zhí)行
  const selectedText = getSelectedText();
  if (!selectedText || !isWord(selectedText)) {
    return;
  }
  // 發(fā)送翻譯請(qǐng)求
  const translation = await translate(selectedText);
  const translationText = translation.trans_result[0].dst; // 獲取翻譯結(jié)果
  addTooltip(translationText, event.target); // 在頁(yè)面上添加提示框
});

這樣，當(dāng)用戶選中的文本不是單詞時(shí)，就不會(huì)發(fā)送翻譯請(qǐng)求。

7、然后代碼中又發(fā)現(xiàn)了沒(méi)有md5的庫(kù)，怎么辦？

error: md5 is not defined 這個(gè)錯(cuò)誤通常是由于在你的 translate 函數(shù)中沒(méi)有正確引入 md5 模塊導(dǎo)致的，因?yàn)?md5 是一個(gè)方法，不是內(nèi)置函數(shù)，需要先導(dǎo)入才能使用。 在使用 md5 之前，需要先在代碼的開(kāi)頭導(dǎo)入 md5 模塊。例如，在使用 md5 之前先導(dǎo)入（或加載）這個(gè)模塊： import md5 from 'md5';

如果你使用的是 CommonJS 模塊規(guī)范，也可以使用 require 方法來(lái)導(dǎo)入模塊，例如： const md5 = require('md5');

想了解更多有關(guān)模塊化編程的信息，可以查看 MDN 文檔。 導(dǎo)入 md5 模塊后，在你的 translate 函數(shù)中就可以使用 md5 方法了。例如：

import md55 from 'md5';
async function

8、edge 擴(kuò)展中，怎么引入md5模塊

在 Edge 擴(kuò)展中，由于瀏覽器的安全策略的限制，我們不能直接使用 import 的方式引入 md5 模塊。但是，在擴(kuò)展中我們可以通過(guò)添加腳本文件的方式來(lái)引入第三方庫(kù)。 具體來(lái)說(shuō)，可以按照以下步驟來(lái)引入 md5 模塊：

1. 1.
2. 下載 md5 庫(kù)的 JS 文件，可以從 這里 下載，也可以將其下載到本地，然后在擴(kuò)展目錄中創(chuàng)建一個(gè) lib 文件夾，將 md5 的 JS 文件放到該文件夾下。
3. 2.
4. 在擴(kuò)展的 manifest.json 文件中添加以下內(nèi)容，在 content_scripts 字段中的 js 數(shù)組中添加 md5.js，這樣擴(kuò)展就可以在每個(gè)頁(yè)面中注入 md5.js 腳本文件了。

"content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": [
      "content_script.js",
      "lib/md5.js"
    ]
  }
],

在需要使用 md5 模塊的地方，可以使用全局變量 md5，這個(gè)變量引用的是 md5.js 中導(dǎo)出的模塊。

// 在translate函數(shù)中使用md5模塊
async function translate() {
  // 其它代碼...
  const text = 'hello world';
  const md5Text = md5(text); // 使用全局變量md5
  // 其它代碼...
}

這樣就完成了在 Edge 擴(kuò)展中引入 md5 模塊的過(guò)程。

9、它給我了md5庫(kù)的連接，我下載了一下沒(méi)辦法下載，于是我找到其他的md5的庫(kù)下載下來(lái)就好用了，于是弄上去之后又出來(lái)新的問(wèn)題，如下：Uncaught (in promise) TypeError: Failed to fetch

這個(gè)錯(cuò)誤通常是由于 Fetch API 拋出了異常或者請(qǐng)求被停止或由瀏覽器禁止導(dǎo)致的。這種錯(cuò)誤可能是由下列原因?qū)е碌模?/p>

• 網(wǎng)絡(luò)錯(cuò)誤：例如 DNS 查詢超時(shí)，服務(wù)器連接超時(shí)或連接 reset 等，這種情況下通常會(huì)出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤提示信息。如果確定是網(wǎng)絡(luò)錯(cuò)誤，則需要檢查網(wǎng)絡(luò)連接，嘗試重新加載頁(yè)面或等待一段時(shí)間再次嘗試請(qǐng)求。
• CORS（跨域資源共享）：如果請(qǐng)求資源存在跨域問(wèn)題，可能會(huì)導(dǎo)致瀏覽器拒絕請(qǐng)求。在這種情況下，服務(wù)器必須支持 CORS 以允許跨域請(qǐng)求。可以通過(guò)設(shè)置服務(wù)器響應(yīng)頭來(lái)允許跨域請(qǐng)求，或者使用代理來(lái)解決跨域問(wèn)題。
• 證書(shū)問(wèn)題：如果請(qǐng)求的資源需要 SSL 證書(shū)，未能正確處理證書(shū)可能導(dǎo)致請(qǐng)求失敗。這種情況下可能需要檢查證書(shū)是否過(guò)期以及證書(shū)是否正確安裝。可以嘗試更新 HTTPS 證書(shū)或安裝可信證書(shū)。
• Cookie 或 Storage 問(wèn)題：如果請(qǐng)求的數(shù)據(jù)依賴于 Cookie 或 Storage，可能需要確保請(qǐng)求的網(wǎng)址與存儲(chǔ)的 Cookie 或 Storage 相應(yīng)相匹配。
• 請(qǐng)求被停止：如果頁(yè)面在請(qǐng)求進(jìn)行時(shí)被卸載、導(dǎo)航到其他地方或關(guān)閉瀏覽器，則可能導(dǎo)致請(qǐng)求被停止。為了避免這種問(wèn)題，可以通過(guò)使用 async/await 或 Promise 等方式確保請(qǐng)求完成之前不進(jìn)行導(dǎo)航或關(guān)閉。

綜上所述，解決 Uncaught (in promise) TypeError: Failed to fetch 的錯(cuò)誤需要根據(jù)具體情況進(jìn)行排查。可以通過(guò)查看請(qǐng)求狀態(tài)碼、Network 面板以及瀏覽器控制臺(tái)來(lái)獲取更多提示信息，并根據(jù)具體情況進(jìn)行相應(yīng)的修復(fù)。

10、然后我發(fā)現(xiàn)錯(cuò)誤原因是這個(gè)，于是把問(wèn)題又發(fā)給了chtgpt。“from origin 'https://spring.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.”

這個(gè)錯(cuò)誤信息表明請(qǐng)求的資源存在跨域問(wèn)題并且服務(wù)器未設(shè)置跨域訪問(wèn)控制。跨域資源共享（CORS）是一種瀏覽器技術(shù)，用于解決跨域資源請(qǐng)求的安全性問(wèn)題。CORS 要求服務(wù)器在響應(yīng)頭設(shè)置 Access-Control-Allow-Origin 來(lái)指定能夠訪問(wèn)該資源的域名。如果服務(wù)器未設(shè)置該響應(yīng)頭，則瀏覽器將拒絕該請(qǐng)求。 要解決這個(gè)問(wèn)題，可以嘗試以下幾種方案：

• 在服務(wù)器端添加 Access-Control-Allow-Origin 頭來(lái)設(shè)置允許訪問(wèn)的來(lái)源。例如，在響應(yīng)頭中添加以下代碼：Access-Control-Allow-Origin: https://spring.io。 如果服務(wù)器無(wú)法進(jìn)行修改，則可以考慮使用 JSONP 或改用其他代理解決跨域問(wèn)題。
• 再使用 JSONP 時(shí)，瀏覽器會(huì)將請(qǐng)求封裝在一個(gè) script 標(biāo)簽內(nèi)并向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器返回一個(gè) JavaScript 腳本字符串，該字符串會(huì)被瀏覽器自動(dòng)執(zhí)行。JSONP 的原理是在響應(yīng)結(jié)果中返回一段 JS 代碼并立即執(zhí)行，該代碼由響應(yīng)結(jié)果中的回調(diào)函數(shù)來(lái)執(zhí)行。
• 如果服務(wù)器未設(shè)置 Access-Control-Allow-Origin 頭并需要進(jìn)行修改，則可以使用代理解決跨域問(wèn)題。在代理服務(wù)器中請(qǐng)求 API 并將結(jié)果返回到客戶端，這樣客戶端就不會(huì)與原服務(wù)器進(jìn)行跨域通信。 如果以上無(wú)法解決跨域問(wèn)題，則可以考慮將網(wǎng)站升級(jí)到 HTTPS 協(xié)議或使用 CORS 插件或擴(kuò)展程序等進(jìn)行解決。

總之，解決跨域問(wèn)題需要根據(jù)具體情況進(jìn)行排查并采取相應(yīng)措施。可以通過(guò)檢查響應(yīng)頭、瀏覽器控制臺(tái)以及 Network 面板獲取更多提示信息。 在edge plugin 代碼中應(yīng)該怎么實(shí)現(xiàn)呢

11、這個(gè)問(wèn)題我怎么問(wèn)都不能解決問(wèn)題，我上網(wǎng)搜了一下瀏覽器插件跨域問(wèn)題解決，網(wǎng)上有些內(nèi)容，于是我把搜出來(lái)東西喂給了chatgpt：如下

manifest.json
在配置文件manifest.json中開(kāi)啟這個(gè)權(quán)限，代碼大致如下：
{
"name": "demo",
"version": "0.1.0",
"manifest_version": 3,
"icons": {
"16": "icon/icon16.png",
"48": "icon/icon48.png",
"128": "icon/icon128.png"
},·····
核心的代碼其實(shí)就這一行
chrome.runtime.sendMessage(message, resolve);
借助的API也是chrome瀏覽器內(nèi)置的API，當(dāng)通過(guò) chrome.runtime.sendMessage 將消息發(fā)送出去后，在background.js中會(huì)通過(guò) chrome.runtime.onMessage.addListener 接收到，一旦接收到消息，那么會(huì)立刻觸發(fā)跨域的接口，向后臺(tái)發(fā)送請(qǐng)求，接口返回之后又通過(guò) sendResponse(res) 發(fā)送到頁(yè)面， 此時(shí)的頁(yè)面自然也就可以獲取到跨域接口的值；····

這是使用 Chrome 擴(kuò)展工具實(shí)現(xiàn)跨域請(qǐng)求的方法。使用此方法需要先編寫(xiě)一個(gè)擴(kuò)展工具，然后使用該工具在瀏覽器中調(diào)用跨域 API 接口。 在 manifest.json 配置文件中使用 host_permissions 權(quán)限以允許擴(kuò)展訪問(wèn)跨域資源。

此外，使用 chrome.runtime.onMessage.addListener() 監(jiān)聽(tīng)瀏覽器發(fā)送的消息委托，當(dāng)擴(kuò)展工具接收到消息時(shí)，它可以發(fā)出跨域請(qǐng)求，然后將響應(yīng)發(fā)送回消息委托方。 在 background.js 中使用 fetch() 來(lái)獲取跨域資源的數(shù)據(jù)，并使用 sendResponse() 向消息委托的頁(yè)面返回響應(yīng)數(shù)據(jù)。 在消息委托的頁(yè)面中，通過(guò)使用 chrome.runtime.sendMessage() 將消息委托給擴(kuò)展工具。一旦收到消息，擴(kuò)展工具就會(huì)發(fā)出跨域請(qǐng)求，并將響應(yīng)返回給消息委托方。 需要注意的是，使用Chrome擴(kuò)展工具實(shí)現(xiàn)跨域訪問(wèn)時(shí)，用戶必須安裝該擴(kuò)展工具才能正常使用該功能，因?yàn)樵摴δ苤贿m用于擴(kuò)展工具本身運(yùn)行的瀏覽器。

這里提供一個(gè)完整的示例代碼，展示如何使用 Chrome 擴(kuò)展工具實(shí)現(xiàn)跨域請(qǐng)求。 首先，在 manifest.json 文件中添加以下配置：

{
  "name": "Cross Domain Extension",
  "version": "1.0",
  "manifest_version": 3,
  "description": "A Chrome extension to test cross domain requests",
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "permissions": ["activeTab"],
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "match_about_blank": true,
      "js": ["content.js"]
    }
  ]
}

上面的配置文件將 host_permissions 設(shè)置為 <all_urls>，這樣擴(kuò)展工具就可以訪問(wèn)所有網(wǎng)站了。注意，這個(gè)選項(xiàng)應(yīng)該小心使用，因?yàn)樗鼤?huì)導(dǎo)致一些安全風(fēng)險(xiǎn)。 接下來(lái)，編寫(xiě) background.js，實(shí)現(xiàn)消息委托的邏輯：

// 在后臺(tái)中接收消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'get') {
    fetch(message.url)
      .then(response => response.json())
      .then(data => sendResponse({ success: true, data }))
      .catch(error => sendResponse({ success: false, error }));
  }
  return true;
});

在這個(gè)示例中，我們添加了一個(gè)監(jiān)聽(tīng)器來(lái)接收由 content.js 發(fā)送至擴(kuò)展工具的消息，如果消息的類型是 get，則我們使用 fetch() 向指定 URL 發(fā)送 GET 請(qǐng)求，并將響應(yīng)發(fā)送回 content.js。 最后，編寫(xiě)內(nèi)容腳本 content.js，將需要發(fā)送到擴(kuò)展工具的消息委托至 background.js：

// 獲取當(dāng)前選項(xiàng)卡信息和當(dāng)前頁(yè)面 URL
chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
  const [currentTab] = tabs;
  const url = new URL(currentTab.url);
  // 向擴(kuò)展工具發(fā)送消息
  chrome.runtime.sendMessage(
    {
      type: 'get',
      url: `https://api.github.com/search/repositories?q=${url.host}`
    },
    response => {
      console.log(response);
    }
  );
});

在這個(gè)示例中，我們使用 chrome.tabs.query() API 獲取當(dāng)前選項(xiàng)卡的信息，并從中獲取當(dāng)前頁(yè)面的 URL。我們將 URL 拼接到一個(gè) Github API 查詢中，然后將查詢URL 和消息類型一起發(fā)送至擴(kuò)展工具。 擴(kuò)展工具接收到消息后，獲取請(qǐng)求的 URL 并向該 URL 發(fā)送 GET 請(qǐng)求，并將響應(yīng)發(fā)送回內(nèi)容腳本。內(nèi)容腳本接收響應(yīng)并將其輸出到控制臺(tái)。 在上面的示例中，我們使用了 fetch() 發(fā)送請(qǐng)求，因此需要在 manifest.json 文件中將 "type": "module" 添加至 "background" 區(qū)塊。 完成上述步驟后，在 Chrome 瀏覽器中打開(kāi)一個(gè)網(wǎng)站并點(diǎn)擊擴(kuò)展工具的圖標(biāo)，然后查看控制臺(tái)中的輸出。如一切正常，你應(yīng)該可以看到一個(gè)響應(yīng)結(jié)果對(duì)象。

很快他給我了示例程序，于是我照著示例程序融匯到我的翻譯插件里面，測(cè)試了一下，如下圖：

劃詞翻譯成功，可以進(jìn)行劃詞翻譯了， 但是代碼上還有很多問(wèn)題需要補(bǔ)充

算每天都和英文文獻(xiàn)打交道，是不是還是發(fā)現(xiàn)文獻(xiàn)中總是有那么一些看不懂的英文單詞冒出來(lái)，如果是PDF中的生詞和句子，復(fù)制到翻譯軟件中去翻譯總是有些麻煩，劃詞取詞也不是那么貼合心意。那今天就為大家推薦幾款好用的文獻(xiàn)翻譯軟件，主要針對(duì)快速翻譯全篇文獻(xiàn)或者PDF文件等常見(jiàn)問(wèn)題。

一、Google Chrome瀏覽器的網(wǎng)頁(yè)翻譯

最先推薦的絕對(duì)是筆者認(rèn)為最簡(jiǎn)單好用的谷歌瀏覽器的網(wǎng)頁(yè)翻譯。當(dāng)然，QQ瀏覽器和360瀏覽器也都是可以的，安裝翻譯的插件即可。如果是在校園網(wǎng)的情況下，強(qiáng)烈推薦直接在線鏈接到數(shù)據(jù)庫(kù)用網(wǎng)頁(yè)閱讀文獻(xiàn)。網(wǎng)頁(yè)版的文獻(xiàn)讀起來(lái)非常方便，有很多優(yōu)點(diǎn)：字體大小適中，圖片清晰，并且在旁邊有推薦閱讀的相關(guān)文獻(xiàn)，可以直接訪問(wèn)閱讀。點(diǎn)擊谷歌瀏覽器自帶的翻譯功能，就可以對(duì)全文進(jìn)行翻譯。

翻譯后效果還是很不錯(cuò)的。速度快，并且方便快捷，隨時(shí)想閱讀原文便可以點(diǎn)擊右上角“顯示原始網(wǎng)頁(yè)”切換。

當(dāng)然這種方法簡(jiǎn)便快捷，但是并不是適合所有人，最重要的一點(diǎn)還是要在校園網(wǎng)的環(huán)境下進(jìn)行。那對(duì)于PDF文件可以選擇這個(gè)方法嗎？答案是可以的！不過(guò)需要下載一個(gè)PDF轉(zhuǎn)html的工具。在這里為大家推薦一款在線PDF轉(zhuǎn)換工具，可以直接打開(kāi)使用：

大概幾秒鐘就會(huì)出現(xiàn)轉(zhuǎn)換結(jié)果，直接點(diǎn)擊即可鏈接過(guò)去，再用網(wǎng)頁(yè)自帶的翻譯功能進(jìn)行翻譯，怎么樣，是不是很方便。

因?yàn)镻DF本身一些換行的原因，翻譯效果不如網(wǎng)頁(yè)版的效果好。但是也可以為大家在需要時(shí)提供很大的便利了。

二、知云PDF翻譯閱讀軟件

除了瀏覽器的翻譯功能，還為大家推薦這一款最近很熱門(mén)的專為生物醫(yī)學(xué)生打造的免費(fèi)PDF翻譯軟件——知云文獻(xiàn)翻譯。官方承諾除非倒閉，這款軟件將永久免費(fèi)。并且沒(méi)有任何廣告。可以當(dāng)作PDF閱讀器使用，體積小（只有13M），打開(kāi)迅速，可以做批注、拆分頁(yè)面、標(biāo)記等。可以直接劃詞劃句子翻譯，直接在右側(cè)翻譯欄顯示，方便快捷。翻譯的質(zhì)量很高，有多個(gè)翻譯引擎，引擎3是特別為生物醫(yī)學(xué)科研設(shè)計(jì)的，接近真人翻譯。

1.下載和安裝：打開(kāi)網(wǎng)址http://i.zhiyunwenxian.cn/?p=195即可下載最新版本知云。桌面版適合操作系統(tǒng)Win7-Win10。

2.下載安裝后注冊(cè)登錄，然后打開(kāi)知云，點(diǎn)擊“文件”打開(kāi)一篇英文文獻(xiàn)，用鼠標(biāo)劃取一段文字，無(wú)需點(diǎn)擊任何按鍵，在右邊就會(huì)自動(dòng)出現(xiàn)翻譯。顯示方式是翻譯與原文的對(duì)照，十分方便，不用復(fù)制到別的搜索軟件中。劃取單詞，會(huì)給出解釋和音標(biāo)及讀音。

2.知云集合了四大翻譯引擎，有百度AI翻譯，谷歌智能云翻譯，谷歌生物醫(yī)學(xué)專用翻譯，有道翻譯。剛下載下來(lái)時(shí)，可以使用百度AI翻譯，其他翻譯引擎的解鎖需要分享拿積分（操作也很簡(jiǎn)單）。其中引擎3谷歌生物醫(yī)學(xué)專用翻譯是自建服務(wù)器，對(duì)學(xué)術(shù)專業(yè)術(shù)語(yǔ)作了特別的優(yōu)化，是閱讀文獻(xiàn)首選翻譯引擎，翻譯最接近真人翻譯。除了適用于生物醫(yī)學(xué)，也適用于理工類。有了它再也不用面對(duì)專業(yè)詞語(yǔ)的翻譯哭笑不得了，真的是生物醫(yī)學(xué)專業(yè)的福音！

3. 版面大小調(diào)整，可以通過(guò)拖動(dòng)左右分界改變右側(cè)翻譯框的寬度，讓右側(cè)變寬或變窄。將鼠標(biāo)定位在右邊的翻譯框，Ctrl+加號(hào)，放大翻譯框字體，Ctrl+減號(hào)，縮小翻譯框字體。用縮放工具可以放大自己選中的區(qū)域。

4. 批注和標(biāo)記，知云有豐富全面的批注工具可以選擇，比如高光、附注、下劃線、刪除線、箭頭、矩形、圓形等，還可以手寫(xiě)批注。十分方便。

5. 拆分閱讀和提取重要頁(yè)面，閱讀文獻(xiàn)時(shí)因?yàn)橐?jīng)常一邊看文字一邊看圖片或一邊看參考文獻(xiàn)，所以拆分頁(yè)面也是必不可少的實(shí)用功能。知云支持水平拆分和垂直拆分。

也可插入頁(yè)面（可以是空白也可以不是空白頁(yè)面）和提取頁(yè)面（提取幾頁(yè)都可以）。

6. 還有很多其他功能，工具菜單中有測(cè)量工具（面積和長(zhǎng)度），方便測(cè)量圖片等大小。在翻譯欄的“其他功能”中還可以輸入翻譯模式（支持1萬(wàn)字符）。將知云設(shè)置為默認(rèn)PDF閱讀器后，可以直接使用Endnote打開(kāi)。并且還貼心地帶有夜讀模式，突然讓熬夜看文獻(xiàn)的同學(xué)們感受到一絲溫暖。

三、彩云小譯

彩云小譯是很多人強(qiáng)推的一款翻譯軟件，簡(jiǎn)潔，翻譯效果好，有網(wǎng)頁(yè)版和手機(jī)版本。今天為大家展示一下網(wǎng)頁(yè)版的PDF翻譯功能。點(diǎn)擊https://fanyi.caiyunapp.com進(jìn)入主頁(yè)，上傳文檔前需注冊(cè)登錄（很方便）。

翻譯速度較快，幾秒后便翻譯完全文，有雙語(yǔ)對(duì)照和譯文兩種模式，可以免費(fèi)在線瀏覽，也可以下載，每個(gè)用有五次免費(fèi)下載的機(jī)會(huì)，也可以通過(guò)好友助力、付費(fèi)、會(huì)員等方式進(jìn)行多次下載。整體來(lái)說(shuō)操作比較方便快捷。

四、Copy Translator

CopyTranslator包含多個(gè)翻譯工具（Google，百度，有道，彩云，搜狗），翻譯質(zhì)量很有保證。這款軟件最大的兩個(gè)特點(diǎn)：自動(dòng)識(shí)別剪切板復(fù)制即翻譯；自動(dòng)解決換行問(wèn)題。點(diǎn)擊網(wǎng)址：

https://github.com/elliottzheng/CopyTranslator/blob/master/README_zh.md，就可以下載最新版本的CopyTranslator。

在網(wǎng)頁(yè)或者PDF文獻(xiàn)中，將想要翻譯的段落劃取，復(fù)制，軟件就會(huì)自動(dòng)監(jiān)聽(tīng)剪切板（也可以設(shè)置不監(jiān)聽(tīng)），快速翻譯，省去了復(fù)制來(lái)粘貼去的時(shí)間。并且軟件自動(dòng)換行，十分方便。軟件占用的空間很小，一般運(yùn)行起來(lái)常駐內(nèi)存只有十幾兆。操作頁(yè)面十分簡(jiǎn)單，上手很迅速。還有點(diǎn)按翻譯、智能互譯、增量復(fù)制等多個(gè)功能。并且該軟件一直在更新，還有許多功能正在開(kāi)發(fā)中，值得期待，是一個(gè)難得的良心好軟件。

最后讓我們一起感受一下Copy Translator的翻譯速度。

好啦，今天的干貨就到這里啦，軟件的功能越來(lái)越強(qiáng)大，但再好的翻譯軟件都不能成為大家英語(yǔ)學(xué)習(xí)偷懶的理由哦！最后祝愿大家，英語(yǔ)越來(lái)越好，文章質(zhì)量越來(lái)越高！

來(lái)源于科研小助手