Question

我正在为chrome编写一个简单的内容脚本，该脚本使用google的tt api读取网页上的文字。该脚本适用于google.co.uk下的域名，但不适用于其他页面。

（帮助使用：在按下＆＃39; 0＆＃39;按下键后播放选定的文字）

的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);
}

请注意输入：＆＃34; tts＆＃34;只被用作钥匙，可能是其他任何东西。此外，tts功能不必匹配密钥。我知道这并不是你想要解决它的方式，但这应该可以解决你的问题。

祝你好运！

chrome扩展，内容脚本 - 跨域请求

1 个答案: