chrome extensions插件通过chrome.storge.sync实现多端数据同步功能

ゝ一世哀愁。 2023-10-04 20:46 9阅读 0赞

有能力的可以看官方文档：[https://developer.chrome.com/docs/extensions/reference/storage/\#property-sync][https_developer.chrome.com_docs_extensions_reference_storage_property-sync]

大多数时候，我们浏览器登陆我们的Google账号之后，就会发生数据同步。假如你有两台或者多台电脑，每一台电脑上都安装了chrome浏览器并且都登陆了google账号，当你在A电脑上查到一个东西，想要同步到B电脑上时候，你会怎么做？？？？？是不是挺麻烦的，所以我就想到了这个功能：![35572c6f4060400cbb9657eb393170e4.png][]

它所用到的API也是非常的简单：

// 设置key值
    chrome.storage.sync.set({ key: value }).then(() => {
      console.log("Value is set to " + value);
    });
    
    
    // 获取一个key值
    chrome.storage.sync.get(["key"]).then((result) => {
      console.log("Value currently is " + result.key);
    });
    
    
    // 移除一个key值
    chrome.storage.sync.remove(key).then(()=>{
      console.log('清空一个值');
    })
    
    
    // 清空所有值
    chrome.storage.sync.clear().then(()=>{
      console.log('清空所有的值');
    })

我们在页面上创建几个按钮：

<div>
        <button id="asyncBtn">同步数据</button> <button id="asyncGetBtn">获取数据</button>  <button id="clearAsyncBtn">清空数据</button>
        <div class="dataBox"><span>同步的内容：</span></span><span id="asyncDataBox"></span></div>
        <span>key:</span><input id="dataKey" type="text" style="width: 80px;" value="data"> 
        <span>value:</span><input id="asyncData" type="text" style="width: 600px;">
      </div>

然后给这个几个按钮绑定事件：

// 同步数据按钮
      const asyncDataBtn = document.getElementById("asyncBtn")
      asyncDataBtn.onclick = function(){
        console.log('开始同步数据');
        const dataKey = document.getElementById("dataKey").value
        const dataVal = document.getElementById("asyncData").value
        dataVal && asyncSetData(dataKey, dataVal)
      }
      // 获取数据
      const asyncGetDataBtn = document.getElementById("asyncGetBtn")
      asyncGetDataBtn.onclick = function(){
        console.log('开始获取并展示数据');
        const dataKey = document.getElementById("dataKey").value
        asyncGetData(dataKey)
      }
    
      // 清空所有的同步数据
      const clearDataBtn = document.getElementById("clearAsyncBtn")
      clearDataBtn.onclick = function(){
        const dataKey = document.getElementById("dataKey").value
        clearData(dataKey)
      }
    
    
    
    // 同步数据到账户中
    function asyncSetData(key, value){
      chrome.storage.sync.set({ [key]: value }).then(() => {
        console.log("Value is set to " + value);
        document.getElementById("asyncDataBox").innerHTML = "同步成功！"
      });
    }
    
    
    function clearData(key){
      if (key) {
        chrome.storage.sync.remove(key).then(()=>{
          console.log('清空一个值');
        })
      }else{
        chrome.storage.sync.clear().then(()=>{
          console.log('清空所有的值');
        })
      }
    }
    
    // 获取数据
    async function asyncGetData(key){
      // 获取单个key的值
      // chrome.storage.sync.get([key]).then((result) => {
      //   console.log("Value currently is ", result);
      //   document.getElementById("asyncDataBox").innerHTML = result[key]
      // });
      // 获取到的所有数据
      const all = await chrome.storage.sync.get();
      let resultContent = "<br>"
      console.log('获取到的所有同步数据是:', all);
      for (const key in all) {
        if (Object.hasOwnProperty.call(all, key)) {
          const element = all[key];
          resultContent += `${key} : ${element} <br>`
        }
      }
      document.getElementById("asyncDataBox").innerHTML = resultContent
    }

最后的样式：

![3207b976c7364cfcb4b5330bd9e19607.png][]

当我们设置一个值得时候：填写一个key和一个value，然后点击同步数据，会有同步成功的提示

![aff58dc8ad4c4260bfdf93836377f1c6.png][]

当我们点击获取数据的时候：就会把数据同步过来，如果设置多个，就会换行展示

![15d0381daec148f191e19320aadeb8df.png][]

然后点击清空数据：就会提示所有数据清空成功

![25ee1395b47f4737a9b8517cc60183f8.png][]

[https_developer.chrome.com_docs_extensions_reference_storage_property-sync]: https://developer.chrome.com/docs/extensions/reference/storage/#property-sync
[35572c6f4060400cbb9657eb393170e4.png]: https://img-blog.csdnimg.cn/35572c6f4060400cbb9657eb393170e4.png
[3207b976c7364cfcb4b5330bd9e19607.png]: https://img-blog.csdnimg.cn/3207b976c7364cfcb4b5330bd9e19607.png
[aff58dc8ad4c4260bfdf93836377f1c6.png]: https://img-blog.csdnimg.cn/aff58dc8ad4c4260bfdf93836377f1c6.png
[15d0381daec148f191e19320aadeb8df.png]: https://img-blog.csdnimg.cn/15d0381daec148f191e19320aadeb8df.png
[25ee1395b47f4737a9b8517cc60183f8.png]: https://img-blog.csdnimg.cn/25ee1395b47f4737a9b8517cc60183f8.png