Question

我创建了一个Google Chrome扩展程序。它的工作正常，清单版本1 的manifest.json

    {
   "browser_action": {
      "default_icon": "icon.png",
      "default_title": "cc.cr URL shortner",
      "popup": "popup.html"
   },
   "description": "Simple URL shortener with really short URLs.",
   "icons": {
      "128": "logo.png"
   },
     "name": "CC.Cr Url shortener extansion",
   "permissions": [ "tabs", "contextMenus", "http://cc.cr/" ],
   "update_url": "http://clients2.google.com/service/update2/crx",
   "version": "0.1"
}

但是当我在浏览器中使用清单版本2时的manifest.json

{
  "name": "cc.cr",
  "version": "1.0",
  "manifest_version": 2,
  "description": "URL shortner",
  "icons": { "128": "logo.png", "16": "icon.png" },
  "browser_action": {
      "default_icon": "icon.png",
      "default_title": "cc.cr URL shortner",
      "default_popup": "popup.html"
   },
  "permissions": [ "tabs", "contextMenus", "http://cc.cr/" ],
  "homepage_url": "http://cc.cr"
}

请有人告诉我清单2中的错误在哪里？我在这个小文件上花了超过15个小时。 :( 这是 popup.html

<html>
<script>
/*   XML request to get shortened URL    */
function shoretenUrl(url, responseFunction) {
        // verify URL
        if (url.length < 5 || !url.match(/^https?:\/\//)) {
           (responseFunction)({"error": true, "message": "Invalid URL."});
        return;
}
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://cc.cr/crx.php", true);
        xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            try {
                var response = JSON.parse(xhr.responseText);
                if (response.surl == undefined) {
                    throw response.message;
                }
            } catch (e) {
                (responseFunction)({"error": true, "message": e});
                return;
            }

            (responseFunction)({"error": false, "url": response.surl});
        }
    };
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("url="+ encodeURIComponent(url));
}

/*   * Shorten tab URL   */
function shortenTabUrl(tab) {
    var loader = document.getElementById("loader");
    var error = document.getElementById("error");
    var input = document.getElementById("shortUrl");
    var copied = document.getElementById("copied");
    loader.style.display = "";
    copied.style.display = "none";
    shoretenUrl(tab.url, function(response) {
        loader.style.display = "none"; // hide loader

        // error message
        if (response.error) {
            error.style.display = "block";
            error.innerText = response.message;
            input.value = "";
            return;
        }   error.style.display = "none";

        // get response URL and copy
        input.style.display = "";
        input.focus();
        input.value = response.url;
        input.select();
        try {
            document.execCommand("Copy");
            copied.style.display = "";
        } catch(e) {}       });     }

/*   * Initiate shortening process   */
function init() {
    chrome.tabs.getSelected(null, shortenTabUrl);
}

</script> 

</head>
  <body onload="init();">
<h1>CC.Cr</h1>
<p>Short URL:</p>
<p id="error"></p>
<p>
    <input type="text" id="shortUrl"/>
    <img src="loader.gif" id="loader" alt="" />
</p>
<p id="copied">
    Copied to clipboard.
</p>
  </body>
</html>

Answer 1

一个潜在的问题是使用清单2，您是cannot use内联脚本。让它工作的一种方法是使用脚本内容创建单独的popup.js文件，然后将popup.html更改为如下所示：

<html>
<head>
    <script type="text/javascript" src="popup.js"></script>
</head>
  <body>
    <h1>CC.Cr</h1>
    <p>Short URL:</p>
    <p id="error"></p>
    <p>
      <input type="text" id="shortUrl"/>
      <img src="loader.gif" id="loader" alt="" />
    </p>
    <p id="copied">
      Copied to clipboard.
    </p>
  </body>
</html>

然后使用以下内容调用init文件中的popup.js功能：

window.onload = function() {
    init();
}

什么是宣言2

1 个答案: