Question

这是我有史以来第一个Chrome扩展程序，而且js并不是我的强项。我觉得这很简单，由于两者的经验不足，这只是我的事。

我正在尝试从存储中读取内容，并将读取的内容（或默认值）放入文本字段。似乎没有找到元素ID：“ orgurl”，这就是为什么它不能填写该字段的原因，但我可能是错的。

在这段代码中，标题出现错误（请参见标记为“ BUG”的行）：

function restore_options() {

    // Use default value of https://o.yourdomain.com
    chrome.storage.sync.get({
        oURL: 'https://o.yourdomain.com'
    }, function(items) {
        document.getElementById('orgurl').value = items.oURL; // BUG: NOT filling it into the text box
    });

}

（注意：该代码几乎是从“ Chrome开发者”页面上的https://developers.chrome.com/extensions/options}

如果我在出现错误的行之前添加console.log(items.oURL)，它会显示正确的信息，只是无法将信息添加到文本字段中。

我在与此相同的js文件（options.js）中调用它：

document.addEventListener('DOMContentLoaded', restore_options);

由于Chrome扩展程序相互交织，我还将添加该扩展程序的所有相关内容，希望对您有所帮助。

清单

{
  "manifest_version": 2,
  "name": "O Viewer",
  "version": "1.0.0",

  "icons": {
    "16": "assets/images/icon16.png",
    "32": "assets/images/icon32.png",
    "48": "assets/images/icon48.png",
    "128": "assets/images/icon128.png"
  },

  "background": {
    "scripts": ["assets/js/options.js", "assets/js/popup.js"],
    "persistent": false
  },

  "browser_action": {
    "default_popup": "pages/popup.html",
    "default_icon": {
      "16": "assets/images/icon16.png",
      "32": "assets/images/icon32.png",
      "48": "assets/images/icon48.png",
      "128": "assets/images/icon128.png"
    }
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["assets/js/options.js", "assets/js/popup.js"],
      "match_about_blank": false
    }
  ],

  "content_security_policy": "script-src 'self' https://o.yourdomain.com; object-src 'self'",

  "options_ui": {
    "chrome_style": true,
    "page": "pages/options.html",
    "open_in_tab": false
  },

  "permissions": [
    "<all_urls>",
    "https://ajax.googleapis.com/",
    "storage"
  ]
}

Options.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>O Viewer: Settings</title>
    <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
    <link href="../assets/css/styles.css" rel="stylesheet" type="text/css">
    <script href="../assets/js/options.js"></script>
</head>
    <body>
        <div class="options-header">
            <h1 class="logo">
                <a href="https://blah.com" id="logo-title">Options</a>
            </h1>
        </div>
        <div class="options-content">

            <label id="orgurllabel">
                URL to your O Server:
                <span id="orgurlex">(ex. https://o.yourdomain.com)</span>
                <input id="orgurl" type="text"> 
            </label>

            <div id="save_status"></div>
            <button id="save_options">Save</button>

        </div>
    </body>
</html>

有任何想法吗？

Answer 1

当您尝试查找错误时，manifest.json中包含的不同脚本似乎引起了一些混乱。上面的注释是正确的，您应该能够从清单的assets/js/options.js和assets/js/popup.js部分中同时删除background和content_scripts。可以直接从options.html和popup.html调用它们。如果您还没有背景脚本和内容脚本，则可能必须完全删除这些条目才能加载您的扩展程序。

一旦清单被缩减，它应该清除在加载扩展程序或检查后台页面时看到的错误，并使故障排除更加简单。在这种情况下，您的JS看起来工作正常，但是输入错误较小（<script href="../assets/js/options.js"></script>而不是<script src="../assets/js/options.js"></script>），无法将其加载到选项页上。

https://stackoverflow.com/a/28999241/2581399上有所有Chrome扩展脚本和页面的概述，可以使您更容易跟踪发生在何处的事件。

Chrome扩展程序：“错误处理响应：TypeError：无法将属性'value'设置为null”

1 个答案: