chrome-extention替換選定的文本

Question

我試圖將我的firefox插件移植到chrome，這裏是我的示例代碼。

文件：myscript.js（部分）

. 
. 
function init() { 
    . 
    . 
    . 
} 
function myFunc(inp, option) { 
    . 
    . 
    . 
} 

chrome.extension.onMessage.addListener(function (message, sender, response) { 
    switch (message) { 
     case "ITRANS": 
      console.log("ITRANS"); 
      if (document.getSelection().baseNode != null){ 
       init(); 
       window.modifySelection(myFunc(window.getSelection().toString(), 0)); 
      } 
      break; 
     case "Devanagari": 
      console.log("Devanagari"); 
      if (document.getSelection().baseNode != null){ 
       init(); 
       window.modifySelection(myFunc(window.getSelection().toString(), 1)); 
      } 
      break; 
     default: 
      console.log("Default"); 
    } 
}); 

文件：background.js

var _selection_univ = chrome.contextMenus.create({ 
    "title": "INDIC 2 ITRANS", 
    "id": "ITRANS", 
    "onclick": reportclick, 
    "contexts": ["selection"] 
}, function() { 
    console.log("Context Menu 1 ITRANS"); 
}); 
var _selection_univ = chrome.contextMenus.create({ 
    "title": "Eng 2 Devanagari", 
    "id": "Devanagari", 
    "onclick": reportclick, 
    "contexts": ["selection"] 
}, function() { 
    console.log("Context Menu 2 Devanagari"); 
}); 

function reportclick(info, tab) { 
    switch (info.menuItemId) { 
     case "ITRANS": 
     console.log("BG: ITRANS"); 
      chrome.tabs.sendMessage(tab.id, "ITRANS"); 
      break; 
     case "Devanagari": 
     console.log("BG: Devanagari"); 
      chrome.tabs.sendMessage(tab.id, "Devanagari"); 
      break; 
     default: 
      console.log("BG: Default"); 
    } 
} 

文件：manifest.json的

{ 
    "name": "Parivartan", 
    "version": "0.8.2", 
    "manifest_version": 2, 
    "permissions":[ 
    "contextMenus", 
    "<all_urls>", 
    "tabs" 
    ], 
    "content_scripts": [ 
    { 
     "matches": ["<all_urls>"], 
     "js": ["myscript.js"], 
     "all_frames": true 
    } 
    ], 
    "background": { 
    "scripts": ["background.js"] 
    } 
} 

我無法弄清楚一些事情。 （1）我的init（）函數應該在哪裏運行（它應該只運行一次以初始化我的插件全局變量）。

（2）將所選文本替換爲函數的輸出。 上面的代碼不起作用，說找不到「modifySelection」。 （3）如果他們在不同的（file2.js）文件中，我怎麼能調用我的函數。 目前我把所有的功能放在一個文件（myscript.js）中。

（4）如何在菜單中創建菜單。

我試圖在谷歌搜索，但無法找到上述解決方案。誰能幫幫我嗎。

-Mohan

Answer 1

（1）應該在哪裏我的init（）函數（這應該只運行一次，以inititialize我的插件全局）放在哪裏？

根據您的要求有應該掩住初始化兩個事件需要：

chrome.runtime.onInstalled：

Fired when the extension is first installed, when the extension is updated to a new version, and when Chrome is updated to a new version.

例如爲：chrome.runtime.onInstalled.addListener(function() {...});

chrome.runtime.onStartup：

Fired when a profile that has this extension installed first starts up. This event is not fired when an incognito profile is started, even if this extension is operating in 'split' incognito mode.

例如： - chrome.runtime.onStartup.addListener(function(details) {...});

---

（2）替換爲函數的輸出所選擇的文本。上面的代碼不起作用說沒有找到「modifySelection」。

這是因爲沒有定義函數modifySelection。你從哪裏得到這個名字？ UPDATE：
基於OP在意見反饋，一個簡單的modifySelection()功能看起來是這樣的：

function modifySelection(newValue) { 
    var range = document.getSelection().getRangeAt(0); 
    range.deleteContents(); 
    range.insertNode(document.createTextNode(newValue)); 
} 

（注：如果選擇僅涉及TextNodes它只會正常工作在其他情況下它可能會破壞DOM，需要選擇，這樣更詳細的解析。）

---

（3）怎麼能說我的函數，如果他們是在不同的（file2.js）文件中。目前我將所有功能放在一個文件中（myscript.js）。

您注入了所有必需的文件，然後像往常一樣調用函數。即所有注入的內容腳本都在相同的JS上下文中執行。例如：

"content_scripts": [{ 
    "matches": ["<all_urls>"], 
    "js": ["file1.js", "file2.js", ...], 
    "all_frames": true 
}], 

在file1.js：

... 
function funcInFile1() {...} 
... 

在file2.js：

... 
var res = funcInFile1(); 
... 

（注意：內容腳本注入的順序它們出現在 「JS」在調用它之前確保每個資源都可用，例如在注入之前試圖調用將導致錯誤。）

---

（4）我怎樣才能菜單中創建菜單。

如果你的意思是「創建一個子菜單」，有一個parentId屬性，你可以包括在createProperties論點chrome.contextMenus.create功能：

parentId:
The ID of a parent menu item; this makes the item a child of a previously added item.

還參見本demo extension它確實（除其他外）。

---

一些最後發言

1. chrome.extension.onMessage已被棄用。請使用chrome.runtime.onMessage代替。

2. 儘可能地嘗試使用Event Pages（而不是背景頁面）。