Я пытаюсь реализовать простое расширение Chrome, которое отображает его содержимое не во всплывающем окне по умолчанию, а на боковой панели. Я понял, что для этого я должен использовать iframe из-за его поведения по умолчанию в стиле всплывающего окна с расширением chrome (которое имеет ограничение по максимальному размеру ширины 800px и высоте 600px. И также не может стилизовать его положение).
Угловой хромированный удлинитель проекта
Над ссылкой находится репозиторий github проекта скаффолдов расширения Angular Chrome, и я пытаюсь создать расширение chrome с помощью Angular.
{
"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 отображается слева от браузера, но не может загрузить index.html с ошибкой «Unchecked runtime.lastError: Невозможно получить доступ к chrome: // URL», а также всплывающее окно ,
(изображение, чтобы описать его поведение)
Есть ли правильный способ запустить расширение Chrome не во всплывающем окне по умолчанию, а в фрейме, который я могу использовать без каких-либо ограничений?