如何在单个 HTML 文件中将 HTML 与 CSS 和 JS 一起注入? - Chrome 分机
How to Inject HTML along with CSS and JS in a single HTML file? - Chrome Extension
我的扩展旨在使用本地 JavaScript 库注入一些 HTML 元素,例如 PrimeUI、jQueryUI 及其对应的 CSS 样式表。
我 found 最好的方法是按如下方式注入 HTML:
// test.js
$.get(chrome.extension.getURL('/overlay.html'), function(data) {
$($.parseHTML(data)).appendTo('body');
}
// manifest.json
{
"name": "Test",
"version": "1.0",
"manifest_version": 2,
"options_page": "",
"description": "Test",
"browser_action": {
"default_title": "Test",
"default_popup": ""
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"js/jquery-3.1.1.min.js",
"js/test.js"
]
}
],
"permissions": [
"tabs"
],
"web_accessible_resources": [
"overlay.html",
"css/font-awesome.min.css",
"css/jquery-ui.min.css",
"css/primeui-all.min.css",
"js/jquery-3.1.1.min.js",
"js/jquery-ui.min.js",
"js/primeelements.min.js",
"js/primeui-all.min.js",
"js/main.js"
]
}
我在根目录的 "js" 文件夹中有所需的 JavaScript 库,出于安全原因,我没有从 CDN 检索它们。
我的 HTML 在 <head>
部分包含 CSS 和 JS,但样式和脚本都适用。
<html>
<head>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/primeui-all.min.css"/>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/primeui-all.min.js"></script>
<script type="text/javascript" src="js/x-tag-core.min.js"></script>
<script type="text/javascript" src="js/primeelements.min.js"></script>
</head>
<body>
<button id="btn-show" type="button">Show</button>
<div id="dlg" title="Godfather I">
<p>The story begins as Don Vito Corleone, ...</p>
</div>
</body>
</html>
// main.js
$(function() {
$('#dlg').puidialog({
showEffect: 'fade',
hideEffect: 'fade',
minimizable: true,
maximizable: true,
responsive: true,
minWidth: 200,
modal: true,
buttons: [{
text: 'Yes',
icon: 'fa-check',
click: function() {
$('#dlg').puidialog('hide');
}
},
{
text: 'No',
icon: 'fa-close',
click: function() {
$('#dlg').puidialog('hide');
}
}
]
});
$('#btn-show').puibutton({
icon: 'fa-external-link-square',
click: function() {
$('#dlg').puidialog('show');
}
});
}
按钮已成功显示,但没有附加任何事件或样式。
即:如果我在 Whosebug 上注入此代码,我的按钮会从 SO 而不是我的那里获取样式。
我想尽可能避免 JavaScript 创建元素,或以编程方式注入标签,以将视图与控制器分开。
我如何才能像往常一样通过注入的 HTML 使用我的样式和脚本?我已尝试将它们添加到 web_accessible_resources
,但未成功添加到其他清单字段。
Makyen 解释道:
无法使用硬编码的 <head>
元素解析 HTML,例如 <script>
和 <link>
。相反,它应该以其他方式注入。
我选择的注入文件的方式是:
For the CSS:
// Test.js
/** CSS Injection */
var link = document.createElement("link");
link.href = chrome.extension.getURL("css/jquery-ui.min.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);
For the JS:
// Test.js
/** JavaScript Injection */
var s = document.createElement('script');
s.src = chrome.extension.getURL('js/jquery-3.1.1.min.js');
// "When an inline script is inserted in the document, it's immediately executed
// and the <script> tag can safely be removed". – Rob W.
s.onload = s.remove;
(document.head || document.documentElement).appendChild(s);
Trying to insert large amounts of code/libraries as into the page context using tags has a significant chance of interfering with the current contents/JavaScript of the page. Is there a reason that you are inserting scripts into the page context? Normally, you would have these inserted scripts (and CSS) as content scripts (manifest.json
content_scripts, or chrome.tabs.executeScript()/chrome.tabs.insertCSS(). not in the page context. – Makyen
通过上面的代码我已经成功注入了文件,但是样式和功能只是偶尔应用,我会在修复这个问题时编辑。
我的扩展旨在使用本地 JavaScript 库注入一些 HTML 元素,例如 PrimeUI、jQueryUI 及其对应的 CSS 样式表。
我 found 最好的方法是按如下方式注入 HTML:
// test.js
$.get(chrome.extension.getURL('/overlay.html'), function(data) {
$($.parseHTML(data)).appendTo('body');
}
// manifest.json
{
"name": "Test",
"version": "1.0",
"manifest_version": 2,
"options_page": "",
"description": "Test",
"browser_action": {
"default_title": "Test",
"default_popup": ""
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"js/jquery-3.1.1.min.js",
"js/test.js"
]
}
],
"permissions": [
"tabs"
],
"web_accessible_resources": [
"overlay.html",
"css/font-awesome.min.css",
"css/jquery-ui.min.css",
"css/primeui-all.min.css",
"js/jquery-3.1.1.min.js",
"js/jquery-ui.min.js",
"js/primeelements.min.js",
"js/primeui-all.min.js",
"js/main.js"
]
}
我在根目录的 "js" 文件夹中有所需的 JavaScript 库,出于安全原因,我没有从 CDN 检索它们。
我的 HTML 在 <head>
部分包含 CSS 和 JS,但样式和脚本都适用。
<html>
<head>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/primeui-all.min.css"/>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/primeui-all.min.js"></script>
<script type="text/javascript" src="js/x-tag-core.min.js"></script>
<script type="text/javascript" src="js/primeelements.min.js"></script>
</head>
<body>
<button id="btn-show" type="button">Show</button>
<div id="dlg" title="Godfather I">
<p>The story begins as Don Vito Corleone, ...</p>
</div>
</body>
</html>
// main.js
$(function() {
$('#dlg').puidialog({
showEffect: 'fade',
hideEffect: 'fade',
minimizable: true,
maximizable: true,
responsive: true,
minWidth: 200,
modal: true,
buttons: [{
text: 'Yes',
icon: 'fa-check',
click: function() {
$('#dlg').puidialog('hide');
}
},
{
text: 'No',
icon: 'fa-close',
click: function() {
$('#dlg').puidialog('hide');
}
}
]
});
$('#btn-show').puibutton({
icon: 'fa-external-link-square',
click: function() {
$('#dlg').puidialog('show');
}
});
}
按钮已成功显示,但没有附加任何事件或样式。
即:如果我在 Whosebug 上注入此代码,我的按钮会从 SO 而不是我的那里获取样式。
我想尽可能避免 JavaScript 创建元素,或以编程方式注入标签,以将视图与控制器分开。
我如何才能像往常一样通过注入的 HTML 使用我的样式和脚本?我已尝试将它们添加到 web_accessible_resources
,但未成功添加到其他清单字段。
Makyen 解释道:
无法使用硬编码的 <head>
元素解析 HTML,例如 <script>
和 <link>
。相反,它应该以其他方式注入。
我选择的注入文件的方式是:
For the CSS:
// Test.js
/** CSS Injection */
var link = document.createElement("link");
link.href = chrome.extension.getURL("css/jquery-ui.min.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);
For the JS:
// Test.js
/** JavaScript Injection */
var s = document.createElement('script');
s.src = chrome.extension.getURL('js/jquery-3.1.1.min.js');
// "When an inline script is inserted in the document, it's immediately executed
// and the <script> tag can safely be removed". – Rob W.
s.onload = s.remove;
(document.head || document.documentElement).appendChild(s);
Trying to insert large amounts of code/libraries as into the page context using tags has a significant chance of interfering with the current contents/JavaScript of the page. Is there a reason that you are inserting scripts into the page context? Normally, you would have these inserted scripts (and CSS) as content scripts (manifest.json content_scripts, or chrome.tabs.executeScript()/chrome.tabs.insertCSS(). not in the page context. – Makyen
通过上面的代码我已经成功注入了文件,但是样式和功能只是偶尔应用,我会在修复这个问题时编辑。