chrome extension, content script - запрос перекрестного домена

Question

Я пишу простой скрипт содержимого для хром, который читает текст на веб-страницах, используя google tts api. Скрипт отлично работает на доменах под google.co.uk, но не работает на других страницах.

(помощь для использования: он играет выбранный текст после того, как ключ '0' нажат)

manifest.json:

{ 
    "manifest_version": 2, 
    "name": "text reader", 
    "description": "text reader using google's text to speech api", 
    "version": "0.1", 
    "content_scripts": [{ 
     "matches": ["<all_urls>"], 
     "js": ["tts.js"] 
    }], 
    "permissions": [ 
     "http://*/", 
     "https://*/" 
    ] 
} 

tts.js:

function Tts() { 
    var ttsurl = "https://translate.google.co.uk/translate_tts"; 
    var audio = new Audio(); 
    audio.onloadeddata = function() { 
     audio.play(); 
    }; 

    this.read = function(text) { 
     var url = ttsurl + "?q=" + escape(text) + "&tl=en"; 
     audio.src = url; 
     alert(url); 
    } 
} 

var tts = new Tts(); 

document.onkeypress = function() { 
    if(event.keyCode == 48) { //key '0' pressed 
     var text = getSelection(); 
     tts.read(getSelection().toString()); 
    } 
} 

Есть хороший способ сделать запросы на междоменные запросы из сценария контента? Я также рад изменить настройки своего браузера. То, что я пробовал: установление разрешения для всех URL-адресов (см. Разрешения manifest.json)

Answer 1

Решение, которое я нашел, довольно прямолинейно. Как вы уже знаете, вы не можете использовать TTS API в сценариях контента. Что вам нужно сделать, так это использовать фоновую страницу или страницу событий для нашей цели, так как она должна быть редко использована.

manifest.json:

... 
"permissions": [ 
    "http://*/", 
    "https://*/", 
    "tts" 
], 
"background": { 
    "scripts": ["background.js"], 
    "persistent": false 
} 

tts.js:

document.onkeypress = function() { 
    if(event.keyCode == 48) { //key '0' pressed 
     var text = getSelection().toString(); 
     chrome.runtime.sendMessage({type:"tts", text:text}); 
    } 
} 

background.js:

chrome.runtime.onMessage.addListener(function (request) { 
    switch(request.type) { 
     case "tts": 
      tts(request.text); 
     break; 
    } 
}); 

function tts(text) { 
    chrome.tts.speak(text); 
} 

или

chrome.runtime.onMessage.addListener(function (request) { 
    if (request.type == "tts") { 
     tts(request.text); 
    } 
}); 

function tts(text) { 
    chrome.tts.speak(text); 
} 

Обратите внимание, что тип: «tts» используется только как ключ и может быть чем угодно. Кроме того, функция tts не должна совпадать с ключом. Я знаю, что это не совсем так, как вы хотели ее решить, но это должно решить вашу проблему.

Удачи вам!