Хочется сделать расширение для браузера, которое бы выводило в левом верхнем углу, например, информацию о владельце интернет-сайта из своей базы.
Например, захожу я на сайт "Одноклассников" или "Мой мир", а в углу всплывает прямоугольник, а в нём логотипчик группы mail.ru и чуть ниже фраза "принадлежит группе mail.ru".
Начал разбираться как это всё организовать на примере
простейшего расширения, вот его файл manifest.json:
{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Adds a solid red border to all webpages matching mozilla.org.",
"icons": {
"48": "icons/border-48.png"
},
"applications": {
"gecko": {
"id": "borderify@mozilla.org",
"strict_min_version": "45.0"
}
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]
}
И застрял. Если "в лоб", то получается, что в файле manifest.json нужно указывать все урлы из базы, а к ним соответствующий файл скипта, где будут прописываться стили для каждой группы урлов:
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*", "*://*.google.com/*"],
"js": ["borderify.js"]
},
{
"matches": ["*://*.opera.com/*", "*://*.stackoverflow.com/*"],
"js": ["borderify_green.js"]
}
]
Здесь файлы скриптов borderify.js and borderify_green.js содержат стили:
document.body.style.border = "5px solid red";
и
document.body.style.border = "5px solid green";
соответственно.
Т.е. на всех страницах первых двух сайтов с их поддоменами будет появляться красная рамочка, а у вторых двух - зелёная.
Однако что-то подсказывает мне, что это неправильно, и всю эту логику нужно выносить в отдельный файл, а не держать её в файле manifest.json. Потому что групп урлов в базе может в итоге оказаться десятки-сотни, и для каждой группы свой стиль.
Тогда получается в файле manifest.json всё красиво и аккуратно:
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["borderify.js"]
}
]
Осталось только разобраться, как задавать if-else условия в файле borderify.js.
Кто-нибудь делал что-то подобное? Помогите вынести логику в отдельный файл.