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

【问题标题】：chrome extension, content script - cross domain requestchrome 扩展，内容脚本 - 跨域请求
【发布时间】：2014-03-04 00:15:10
【问题描述】：

我正在为 chrome 编写一个简单的内容脚本，它使用 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 权限）

【问题讨论】：

标签： google-chrome same-origin-policy content-script

【解决方案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});
    }
}

背景.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);
}

请注意， type:"tts" 仅用作键，可以是其他任何东西。此外， tts 函数不必匹配密钥。我知道这不是您想要解决的方法，但这应该可以解决您的问题。

祝你好运！

【讨论】：