如何在iframe中运行Angular制作的Chrome扩展程序
Cha*_*ark 5 javascript google-chrome google-chrome-extension angular
我正在尝试实现一个简单的Chrome扩展程序，该扩展程序的内容不在默认弹出窗口上，而是在侧边栏上呈现。我已经意识到要这样做，由于其默认的chrome扩展弹出式样式行为（必须限制其最大宽度为800px，高度为600px，并且无法设置其位置样式），因此我必须使用iframe。
链接上方是Angular Chrome扩展脚手架项目的github存储库，我正在尝试使用Angular构建chrome扩展。
{
"manifest_version": 2,
"name": "extension test",
"short_name": "extension test",
"version": "1.0.0",
"description": "extension test",
"permissions": [
"tabs",
"downloads",
"storage",
"activeTab",
"declarativeContent"
],
"browser_action": {
"default_popup": "index.html",
"default_title": "extension test",
"default_icon": {
"16": "assets/images/favicon-16.png",
"32": "assets/images/favicon-32.png",
"48": "assets/images/favicon-48.png",
"128": "assets/images/favicon-128.png"
}
},
"options_ui": {
"page": "index.html#/option",
"open_in_tab": false
},
"content_scripts": [
{
"js": ["contentPage.js"],
"matches": ["<all_urls>"]
}
],
"background": {
"scripts": ["backgroundPage.js"],
"persistent": false
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"default_icon": {
"16": "assets/images/favicon-16.png",
"32": "assets/images/favicon-32.png",
"48": "assets/images/favicon-48.png",
"128": "assets/images/favicon-128.png"
}
}
上面是我的manifest.json文件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Falcon Image Crawler</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
这就是index.html的样子。
最后是我的App.component.ts的样子
export class PopupComponent implements OnInit {
constructor() {
}
public ngOnInit(): void {
chrome.tabs.executeScript({
code: `
(function(){
const iframe = document.createElement('iframe');
iframe.src = chrome.runtime.getURL('index.html');
iframe.style.cssText = 'position:fixed;top:0;left:0;display:block;' +
'width:300px;height:100%;z-index:1000;';
document.body.appendChild(iframe);
})(); `
});
}
}
当我单击chrome扩展程序的图标时，iframe元素会显示在浏览器的左侧，但无法加载“未经检查的runtime.lastError：无法访问chrome：// URL”错误的index.html，并且还会弹出窗口。
（描述其行为的图像）
是否有正确的方法可以在没有默认限制的iframe上运行chrome扩展程序而不是在其默认弹出窗口上运行？
您需要将您的内容添加到Web 可访问资源index.html数组中，如下所示：
{
"manifest_version": 2,
"name": "extension test",
"short_name": "extension test",
"version": "1.0.0",
"description": "extension test",
"web_accessible_resources": [
"index.html"
],
"permissions": [
"tabs",
"downloads",
"storage",
"activeTab",
"declarativeContent"
],
"browser_action": {
"default_popup": "index.html",
"default_title": "extension test",
"default_icon": {
"16": "assets/images/favicon-16.png",
"32": "assets/images/favicon-32.png",
"48": "assets/images/favicon-48.png",
"128": "assets/images/favicon-128.png"
}
},
"options_ui": {
"page": "index.html#/option",
"open_in_tab": false
},
"content_scripts": [
{
"js": ["contentPage.js"],
"matches": ["<all_urls>"]
}
],
"background": {
"scripts": ["backgroundPage.js"],
"persistent": false
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"default_icon": {
"16": "assets/images/favicon-16.png",
"32": "assets/images/favicon-32.png",
"48": "assets/images/favicon-48.png",
"128": "assets/images/favicon-128.png"
}
}
另外，如果您想将脚本包含在任何页面中，则不需要使用chrome.tabs.executeScript，而是使用清单语法。
| 归档时间： |
|
| 查看次数： |
208 次 |
| 最近记录： |