我正在使用React/Redux開發Chrome擴展程序。 爲此,我使用Webpack,現在我正在使用WebPack DLLReference插件將一些資源遷移到分離的文件中,以優化構建過程。Chrome擴展程序:即使將其添加到web_accessible_resources中,資源也不可用
然後我需要將生成的dll/dll.vendor.js加載到彈出窗口和注入內容中。 對於彈出它工作正常,但它不適用於注入的內容。
我已經把它添加到清單
"web_accessible_resources": [
"dll/dll.vendor.js"
],
該文件是存在的,我甚至可以使用路徑訪問它:鉻擴展:///dll/dll.vendor.js
但是它並沒有出現在注入的內容中,因爲我可以看到打開開發工具 - >來源 這當然會在以後生成丟失對象的錯誤。
在遷移到DLLReferencePlugin之前,一切正常。
我的DLL的WebPack配置文件:https://pastebin.com/z9RjRUqm
我的內容的WebPack配置文件:https://pastebin.com/0Niw2Fqm
觸發錯誤行:如果我檢查彈出
module.exports = vendor;
,它具有相同的行,如果我在那裏設置一個斷點並且觀察它定義的變量,問題就會出現y發生在內容中。
注入我的推廣工具欄到頁面的代碼: 內容/ 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'));
任何想法,還有什麼可能是這個問題的原因是什麼? 任何更好的方法來調試爲什麼資源不可用於內容環境?
UPDATE
根據我的,因爲這取決於dll.vendor代碼注入發生在頁面上之前執行,但我不知道我怎樣才能避免這種情況發生它發生最後的調查結果。
那怎麼注入的內容?它從你的問題中缺失。 – Xan
通過渲染 – danielfranca
但不管怎樣,它至少應在源文件中列出的,對不對? – danielfranca