Chrome浏览器插件开发实践：用Service Workers实现跨域数据共享

在开发“微信公众号文章多平台发布助手”这个浏览器插件的时候，需要从已发布的公众号文章页面获取标题、内容等数据，然后打开其他平台的发布页面，把数据填进去。这就涉及到跨域共享数据的问题。

像localStorage、sessionStorage、cookie、indexDB这些存储数据的方式，只适用于同域请求，跨域的情况下是无法使用的。而浏览器扩展中的Service Workers特性正好可以解决这个问题。

Service Workers可以理解成一个后台服务，在浏览器插件加载后就开始运行，它可以监听扩展本身或插入到web页面中的内容脚本(content script)发送的事件，也可以访问插件存储服务或通过定义变量的形式暂存数据。为了快速实现效果，我用了在Service Workers中定义变量的形式来实现了临时的跨域数据共享。代码如下：

let store = {
    title: '',
    content: ''
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.name === 'setData') {
        store.title = message.data.title
        store.content = message.data.content
    }

    if (message === 'getData') {
        sendResponse(store)
    }

    if (message === 'pub') {
        chrome.tabs.create({
            url: "https://mp.csdn.net/mp_blog/creation/editor?from=mp"
        })
    }
})

基本思路就是在Service Workers文件中定义一个对象用于存储数据。在公众号文章页加载的时候，会把收集到的文章数据通过事件的方式发送过来，存储到这个对象里。在打开其他平台的发布页面后，会通过事件的形式，从这个对象里取数据，这样就实现了跨域数据共享。

欢迎关注微信公众号：文本魔术，了解更多。