Javascript Chrome扩展不再工作-调用内容脚本函数时获取未捕获引用错误_Javascript_Google Chrome Extension_Content Script_Referenceerror

Javascript Chrome扩展不再工作-调用内容脚本函数时获取未捕获引用错误

javascript google-chrome-extension

Javascript Chrome扩展不再工作-调用内容脚本函数时获取未捕获引用错误,javascript,google-chrome-extension,content-script,referenceerror,Javascript,Google Chrome Extension,Content Script,Referenceerror,多年来我发现这个网站非常有用，现在我遇到了一个我似乎无法解决的问题，也没有找到解决的办法。希望我没有错过一些简单的东西我已经在一个Chrome扩展上工作了一段时间，它一直没有问题。我决定从主要开发分支出来，进行一些清理，并添加更多功能，这些功能上周已经开始工作。除了将代码排序到目录中并调整manifest.json之外，我不记得做了任何更改，但突然我遇到了一个未捕获的ReferenceError 当用户浏览到一个空的内部页面（页面只包含HTML和BODY标记）时，扩展将注入一堆HTML和内容脚

多年来我发现这个网站非常有用，现在我遇到了一个我似乎无法解决的问题，也没有找到解决的办法。希望我没有错过一些简单的东西

我已经在一个Chrome扩展上工作了一段时间，它一直没有问题。我决定从主要开发分支出来，进行一些清理，并添加更多功能，这些功能上周已经开始工作。除了将代码排序到目录中并调整manifest.json之外，我不记得做了任何更改，但突然我遇到了一个未捕获的ReferenceError

当用户浏览到一个空的内部页面（页面只包含HTML和BODY标记）时，扩展将注入一堆HTML和内容脚本以及jQuery和其他一些附加组件。用户使用选择列表来选择要运行的工具，该工具调用内容脚本中的函数-这就是我得到错误的地方。ChromeDevTools显示所有正在加载的源代码，所以我不确定发生了什么

内容脚本在运行ajax调用和更新HTML正文时工作正常，但我不明白为什么OnChangeJavaScript函数调用不工作。我需要从内容脚本中添加select标记和相关函数调用，而不是将其注入HTML源代码的地方是否发生了变化

出于隐私考虑，更改了网站和功能名称

manifest.json

{
  "manifest_version": 2,
  "name": "My extension",
  "version": "0.2",
  "description": "Add-on function",
  "permissions": ["activeTab", 
                  "tabs", 
                  "declarativeContent", 
                  "storage",
                  "webRequest",
                  "http://site1.mysite.com/",
                  "http://site2.mysite.com/"],

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

  "background": {
    "scripts": ["javascript/jquery/jquery-3.3.1.min.js", 
                "background/background.js"],
    "persistent": true
  },

  "content_scripts": [
      {
        "matches": [
          "http://site2.mysite.com/my_dir/blank.html"
        ],
        "run_at": "document_idle",
        "js": ["javascript/jquery/jquery-3.3.1.min.js", 
               "javascript/datatables/js/jquery.dataTables.min.js", 
               "javascript/datatables/fixedheader/dataTables.fixedHeader.min.js",
               "content/content.js" ],
        "css": ["javascript/datatables/css/jquery.dataTables.min.css"]  
      }
    ],

  "browser_action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },

  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128":"images/get_started128.png"
  },

  "web_accessible_resources": ["content/*",
                               "data/*",
                               "javascript/*", 
                               "images/*"]


}

content.html

....html, head, style tags and content
<body>
<div id="header">
  <select id="my_tool" onchange="my_tool_select(this)">
    <option value="0">Choose Tool </option>
    <!--<option value="1">Tool 1</option>-->
    <option value="2">Tool 2</option>
    <!-- <option value="3">Tool 3</option>-->
    <option value="4">Tool 4</option>
  </select>
</div>
.... lots of other HTML and closing body and html tags

我还注射了。。。通过内容脚本进行编码，仍然会得到相同的错误。

onchange=“my_tool_select（this）”

将在页面上下文中调用my_tool_select，而不是在内容脚本中（其JS环境与页面隔离）。72中有一个固定值，它错误地改变了这种行为。解决方案是停止在html中使用内联处理程序，而改为通过$（…）.on（）以编程方式在内容脚本中附加侦听器。例如，我从现有html页面启动了此扩展，在整个过程中，我注意到所有内容运行的上下文。您已经习惯了它的工作方式，不去想一些琐碎的事情，但是您是对的，页面上下文不应该能够从上下文脚本调用任何东西。添加$（…）.on（）更改事件修复了该问题。我猜该公司在周末推出了Chrome更新。谢谢你的提示。我还注射了。。。通过内容脚本进行编码，仍然会得到相同的错误。

onchange=“my_tool_select（this）”

// Function to initialize the content script
window.addEventListener("load", initialize, false);

function initialize(event) {
    .... other initialization code  
    $.ajax({
        url: chrome.extension.getURL('content/content.html'),
        success: function(data) {        
            $(data).appendTo(document.body);
        }
    });
    .... more initialization code
}

function my_tool_select(tool_option) {
    if ( tool_option == 1 ) {
        ...do something for the selected tool_option
    }
    else if (and so on) 
    ....
}