5

これまでで最もシンプルな Chrome 拡張機能を作成しようとしていますが、残念ながら、大きな問題が発生しています。助けていただければ幸いです。

これは私がやりたいことです：

ページ上のテキストを選択し、拡張ポップアップを押します。そうすると、選択したテキストの背景色が黄色に変わります。他の場所をクリックすると (テキストの選択が解除されると)、背景色が削除されます。

それ、どうやったら出来るの？

ここでこのコードを見つけました：

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

background.js と popup.js と context_script.js の操作方法がよくわかりません。

このコードをpopup.jsに入れて呼び出してみましたhighlight('yellow')が、うまくいきませんでした。また、このコードを background.js に入れて popup.js から呼び出してみましたchrome.extension.getBackgroundPage().highlight('yellow');が、うまくいきませんでした。

いずれにせよ、このコードが機能したとしても、選択したテキストの背景色を変更するだけで、テキストの選択を解除しても削除されません。

いずれにせよ、この最初のビットを機能させるだけで大​​きな助けになります。

現在の形式では、コードは次のように機能します。http://jsfiddle.net/LPnN2/12/ 問題は、拡張機能を使用して機能させることです。

これは私の manifest.json です:

{
   "background": {
      "scripts": [ "readit.js"]
   },


   "description": "Reads out selected text",
   "icons": {
      "128": "icon128.png",
      "16": "icon16.png",
      "48": "icon48.png"
   },
   "browser_action": {
      "default_icon": "icon48.png",
      "default_popup": "popup.html"
   },

   "content_scripts": [ {
   "js": [ "inject.js" ],
   "matches": [ "\u003Call_urls\u003E", "https://*/*" ]
   } ],

   "manifest_version": 2,
   "name": "Speak Me",
   "options_page": "options.html",
   "permissions": [ "contextMenus", "tabs", "notifications", "background" ],
   "update_url": "http://clients2.google.com/service/update2/crx",
   "version": "0.1"
}

私はすでに拡張機能で何か他のことをしています (TTS を使用して、選択したテキストを API 経由で読み上げますが、テキストも強調表示したいので、これを実装しようとしています)。

4

1 に答える 1