简单说明如何开发图书馆浏览器插件

首先我把去年实现的版本代码开放出来了，https://github.com/mangostana-ai/libraryxsz
纯JavaScript打造的，手工操作DOM的方式。

1、当初MVP的想法就是在豆瓣图书右上角展示图书馆可借阅馆藏

2、涉及到宿主网页的修改，需要使用content_script方案

    "content_scripts": [
        {
            "js": [
                "src/contents/douban.js"
            ],
            "matches": [
                "https://book.douban.com/subject/*"
            ]
        },
]

这个douban.js要做的事情是在douban.com dom loaded之后去加载，解析页面的标题及ISBN。
3、然后是涉及到通讯问题
明显存在跨域问题，从douban.com去fetch请求如深圳图书馆的网页是存在问题的。
这里借助的是background service worker的方案，

    "background": {
        "service_worker": "src/background.js",
        "type": "module"
    },

借助浏览器插件的API，chrome.runtime.onMessage

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if(request.visit == 'library') {
        checkBorrowable(request).then(sendResponse);
    } else if(request.visit == 'douban-search') {
        doubanSearch(request).then(sendResponse);
    } else if(request.visit == 'douban-subject') {
        doubanSubject(request).then(sendResponse);
    }
    
    return true; // return true to indicate you want to send a response asynchronously
});

4、解决跨域请求问题，
在backgrond.js去请求图书馆网站也是需要特别注意的，

    try {
        let response = await fetch(url, { mode: 'no-cors' });
        // .then(r => r.text())
        // .then(result => {
        //     return result;
        // })
        return await response.text();
    } catch(e){

    }

要注意看到这个{mode: 'no-cors'}参数设置。
5、而在豆瓣这一段加载的content_script就可以通过发送消息的方式与background service worker通讯了。
使用的是chrome.runtime.sendMessage

chrome.runtime.sendMessage({isbn: isbn,visit: 'library'}, function(response) {
    // 处理图书馆返回内容，并展示到右上角位置
})

6、使用Javascript手工操作DOM的方式，在做数据变化时不容易处理，而且还不维护调整HTML结构。另外目前的做法还缺少CSS样式的处理。
这几个问题通过引入Vue框架是可以解决的。