在本文中，将探讨如何开发一个Chrome扩展程序，该程序可以让用户预览任何现有的Bootstrap网站在各种Bootswatch主题下的效果。
首先，需要从Chrome网上应用店安装这个扩展程序。安装完成后，可以通过点击扩展图标来弹出一个选项框。在弹出的选项框中，选择一个主题并点击“应用主题”按钮，即可将所选主题应用到当前页面。
这个扩展程序由以下几个部分组成：
内容脚本在一个特殊的“隔离世界”环境中运行。它有权访问页面的DOM，但无法访问页面创建的任何JavaScript函数或变量。它也无法访问扩展页面定义的函数和变量。要与父扩展程序通信，需要使用消息传递。
由于内容脚本运行在“隔离世界”中，并且不是父扩展程序的一部分，它只能使用消息传递与扩展程序通信。对于扩展程序中的简单一次性请求，可以使用runtime.sendMessage或tabs.sendMessage发送消息，并使用runtime.onMessage接收消息。对于长期连接，Chrome扩展API提供了其他方法，可以在这里了解更多。
这是扩展程序的manifest.json文件。只指定了activeTab权限，因为只会将内容脚本注入到活动标签页的网页中。
{
"manifest_version": 2,
"name": "Bootswatch Theme Preview",
"short_name": "BootswatchThemePreview",
"description": "Preview a bootstrap site with a bootswatch theme.",
"version": "1.0.1",
"background": {
"scripts": ["js/background.js"]
},
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"browser_action": {
"default_title": "Preview this page with a bootswatch theme.",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
这是popup.js脚本。当用户点击图标时，将加载并执行popup.html页面上的这个脚本。这个脚本有两个目的。首先，它在弹出页面上创建UI元素。其次，它响应应用主题按钮的点击事件，并将内容脚本注入到当前网页中。当按钮被点击时，它调用chrome.tabs.query来获取活动标签页。在回调函数中（大多数Chrome扩展API都是异步的），它将所选主题保存到后台脚本，并调用chrome.tabs.executeScript将content.js脚本注入到网页中。
document.addEventListener('DOMContentLoaded', function() {
createBootswatchSelect();
createBootswatchThumbnails();
document.getElementById("apply-button").addEventListener("click", function(){
chrome.tabs.query({
"active": true,
"lastFocusedWindow": true
}, function(tabs) {
var bootswatchSelectList = document.getElementById("bootswatch-theme-select");
var bootswatchThemeName = bootswatchSelectList.options[bootswatchSelectList.selectedIndex].value;
chrome.extension.getBackgroundPage().saveUserPreference(bootswatchThemeName);
chrome.tabs.executeScript({
file: "js/content.js"
});
});
});
});
这是content.js脚本。它使用chrome.runtime.sendMessageAPI与后台脚本通信。当它在回调函数中收到回复时，它获取所选的Bootswatch主题的CSS CDN，并在当前网页上添加一个样式表元素。
chrome.runtime.sendMessage({method: "getUserBootswatchTheme"}, function(response) {
var link = document.getElementById("injected-bootswatch-theme");
if (link) {
link.href = response.theme.cssCdn;
} else {
var link = document.createElement("link");
link.href = response.theme.cssCdn;
link.type = "text/css";
link.rel = "stylesheet";
link.id = "injected-bootswatch-theme";
document.body.appendChild(link);
}
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.method == "getUserBootswatchTheme") {
sendResponse({ theme: getUserBootswatchTheme() });
}
});
function getUserBootswatchTheme() {
var themeName = getUserBootswatchThemeName();
for (var i = 0; i < bootswatchThemes.themes.length; i++) {
if (bootswatchThemes.themes[i].name == themeName) {
return bootswatchThemes.themes[i];
}
}
console.log("no user bootswatch theme is found");
}
function getUserBootswatchThemeName() {
var name = localStorage["UserBootstrapThemeName"];
if (name == undefined) {
name = "Readable";
}
return name;
}
function saveUserPreference(bootswatchThemeName) {
localStorage["UserBootstrapThemeName"] = bootswatchThemeName;
}