Расширение Chrome больше не работает - получение Uncaught ReferenceError при вызове функции сценария содержимого - PullRequest
Новая
       26

Расширение Chrome больше не работает - получение Uncaught ReferenceError при вызове функции сценария содержимого

0 голосов
/ 20 февраля 2019

Я нашел этот сайт очень полезным на протяжении многих лет, и теперь у меня есть ситуация, которую я не могу решить, и не нашел ответа.Надеюсь, я не пропустил что-то простое здесь.

Я работаю над расширением Chrome уже некоторое время, которое работает без проблем.Я решил отойти от основной разработки, провести некоторую очистку и добавить дополнительные функции, которые работали на прошлой неделе, и я не припомню, чтобы что-то менять, кроме сортировки кода по каталогам и настройки manifest.json, но внезапно я получаюUncaught ReferenceError.

Когда пользователь просматривает пустую внутреннюю страницу (страница содержит только теги HTML и BODY), расширение добавляет набор html и сценарий содержимого вместе с jQuery и несколькими другими надстройками.Пользователь использует список выбора, чтобы выбрать инструмент для запуска, который вызывает функцию в скрипте содержимого - вот где я получаю сообщение об ошибке.Chrome DevTools показывает все загружаемые исходники, поэтому я не уверен, что произошло.

Сценарий содержимого работает, поскольку он выполняет вызов ajax и обновляет тело HTML, но я не могу понять, почему не работает функциональный вызов onchange javascript.Что-то изменилось, когда мне нужно добавить тег выбора и связанный вызов функции из скрипта содержимого, а не вводить его с источником 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

content.js 

// 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) 
    ....
}
...