Fatal编程技术网
  • javascript/
  • Javascript Chrome扩展名：“；错误处理响应：TypeError:无法设置属性'；价值'；“无效”的定义；

Javascript Chrome扩展名：“；错误处理响应：TypeError:无法设置属性'；价值'；“无效”的定义；

javascript google-chrome-extension

Javascript Chrome扩展名：“；错误处理响应：TypeError:无法设置属性'；价值'；“无效”的定义；,javascript,google-chrome-extension,Javascript,Google Chrome Extension,这是我有史以来的第一个Chrome扩展，js也不是我的强项之一。我有一种感觉，这是一件非常简单的事情，由于缺乏这两方面的经验，这件事从我身边溜走了 我试图从存储器中读取，并将读取的内容（或默认值）放入文本字段中。它似乎找不到元素ID:“orgurl”，这就是它无法填充字段的原因，但我可能错了 在这段代码中，我得到了标题中的错误（请参阅标记为“BUG”的行）： （注意：该代码几乎是从Chrome开发者页面一字不差地提取的：） 如果我在错误行之前添加console.log（items.oURL），它

这是我有史以来的第一个Chrome扩展，js也不是我的强项之一。我有一种感觉，这是一件非常简单的事情，由于缺乏这两方面的经验，这件事从我身边溜走了

我试图从存储器中读取，并将读取的内容（或默认值）放入文本字段中。它似乎找不到元素ID:“orgurl”，这就是它无法填充字段的原因，但我可能错了

在这段代码中，我得到了标题中的错误（请参阅标记为“BUG”的行）：

（注意：该代码几乎是从Chrome开发者页面一字不差地提取的：）

如果我在错误行之前添加
console.log（items.oURL）
，它确实显示了正确的信息，只是无法将信息添加到文本字段中

我在同一个js文件（options.js）中调用它，如下所示：

由于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"
  ]
}

{
“清单版本”：2，
“名称”：“O查看器”，
“版本”：“1.0.0”，
“图标”：{
“16”：“assets/images/icon16.png”，
“32”：“assets/images/icon32.png”，
“48”：“assets/images/icon48.png”，
“128”：“assets/images/icon128.png”
},
“背景”：{
“脚本”：[“assets/js/options.js”，“assets/js/popup.js”]，
“持续”：假
},
“浏览器操作”：{
“默认弹出窗口”：“pages/popup.html”，
“默认_图标”：{
“16”：“assets/images/icon16.png”，
“32”：“assets/images/icon32.png”，
“48”：“assets/images/icon48.png”，
“128”：“assets/images/icon128.png”
}
},
“内容脚本”：[
{
“匹配项”：[“
指向O服务器的URL:
（例如。https://o.yourdomain.com)
拯救
任何人有什么想法吗？

当您试图查找错误时，
清单.json
中包含的不同脚本似乎造成了一些混乱。上面的评论是正确的，您应该能够从
后台和
中删除
资产/js/options.js
和
资产/js/popup.js
<代码>内容\清单中的脚本
部分。可以直接从
options.html
和
popup.html
调用这些脚本。如果您还没有任何背景和内容脚本，您可能必须完全删除这些条目才能加载扩展

一旦你削减了清单，它应该会清除你在加载扩展或检查后台页面时看到的错误，并简化故障排除。在这种情况下，你的JS看起来工作正常，但你有一个小的输入错误（
，而不是
），阻止它加载到选项页面上


所有的Chrome扩展脚本和页面都有一个很好的概览，这可能会让你更容易跟踪什么在哪里触发。
是
项目。oURL
定义了吗？从
后台
脚本中删除
资产/js/options.js
。在后台和内容脚本中没有使用相同的js的逻辑。但是，如果在bacground脚本中使用的
assets/js/options.js
中，为此创建一个单独的bg.js文件。对于
assets/js/popup.js
的注释是正确的，对
getElementById
的调用找不到元素（它返回
null
）。我怀疑它正在后台页面中运行，该页面没有访问DOM的权限。

document.addEventListener('DOMContentLoaded', restore_options);



{
  "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"
  ]
}



<!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>