Расширение Chrome: ресурс недоступен, даже если он добавлен в web_accessible_resources

Question

Я разрабатываю расширение Chrome с использованием React/Redux. Для этого я использую Webpack, а теперь я переношу некоторые ресурсы в отдельный файл, используя плагин WebPack DLLReference для оптимизации процесса сборки.

Затем мне нужно загрузить сгенерированный dll/dll.vendor.js как во всплывающее окно, так и во вставленный контент. Для всплывающего окна это работает нормально, но не работает для внедренного контента.

Я добавил это в манифест

"web_accessible_resources": [
    "dll/dll.vendor.js"
],

Файл есть, я даже могу получить к нему доступ, используя путь: chrome-extension: ///dll/dll.vendor.js

Но он не присутствует во внедренном контенте, как я вижу, открывая Инструменты разработчика -> Источники, которые, конечно, позже генерируют ошибки отсутствующих объектов.

Все работало нормально, прежде чем перейти на DLLReferencePlugin.

Файл конфигурации моего веб-пакета DLL: https://pastebin.com/z9RjRUqm

Конфигурационный файл My Content в веб-пакете: https://pastebin.com/0Niw2Fqm

Ошибка, которую я получаю

Строка, которая вызывает ошибку:

module.exports = vendor;

Если я проверяю всплывающее окно, оно имеет ту же строку, если я устанавливаю точку останова и наблюдаю за переменной, которую оно определило, проблема возникает только в содержимом.

Код для добавления моей панели инструментов Расширения на страницу: content / src / index.js

import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Store} from 'react-chrome-redux';

const anchor = document.createElement('div');
anchor.id = 'my-anchor';
document.body.appendChild(anchor)

const vendorUrl = chrome.runtime.getURL("dll/dll.vendor.js")

render(
  <Provider store={proxyStore}>
      <div>
          <script src={vendorUrl}></script>
          <link id='semantic-ui' rel='stylesheet' type='text/css'
                href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css' media='all' />
          <AppContainer>
              <ToolbarContent />
          </AppContainer>
      </div>
  </Provider>
  , document.getElementById('my-anchor'));

Есть идеи, что еще может быть причиной этой проблемы? Есть ли лучший способ отладки, почему ресурс не доступен для контентной среды?

ОБНОВИТЬ

Основываясь на моих последних выводах, это происходит потому, что код, зависящий от dll.vendor, выполняется до того, как на странице произойдет внедрение, но я не знаю, как этого избежать.

Answer 1

В вашем понимании контент-скриптов отсутствует одна вещь - парадигма изолированного мира:

Сценарии содержимого выполняются в специальной среде, называемой изолированным миром. У них есть доступ к DOM страницы, в которую они внедрены, но не к каким-либо переменным или функциям JavaScript, созданным этой страницей. Каждый скрипт содержимого выглядит так, как будто на странице, на которой он запущен, нет другого JavaScript-кода. То же самое верно и в обратном: JavaScript, запущенный на странице, не может вызывать какие-либо функции или обращаться к любым переменным, определенным скриптами содержимого.

Как это связано? Ну, если вы добавляете <script> Элемент DOM страницы, код будет выполняться в контексте страницы, а не в контексте вашего скрипта содержимого. Этот метод называется "уровень страницы" или "внедренные" сценарии.

Однако это не то, что вы хотите. Вы хотите это в контексте скрипта контента, чтобы вы могли использовать библиотеки. Тогда у вас есть варианты:

1. Если вам всегда нужна одна и та же конфигурация сценария, лучше всего добавить сценарии в виде массива в манифест. Порядок загрузки имеет значение:

   "js" : [ "library.js", "actual_code.js" ]
   

2. Если по какой-то причине вам необходимо динамически загружать код во время выполнения из существующего скрипта содержимого, вы можете запросить фоновую страницу, чтобы программно внедрить его. Если вы уже делаете это, просто цепочка вызовов в правильном порядке.

3. Не технически идеальное решение, но вы можете XHR свой внутренний ресурс, а затем eval() из контекста сценария содержимого.