浏览器插件开发问题解决

📝

1.为了在不同框架（如Vue和React）中更新输入框的值，

我们需要根据框架的特点进行操作。由于不同框架的数据更新后触发同步的机制不同，所以更新数据的方式也有所不同。值得注意的是，execCommand函数虽然仍然（当前2024年1月24日）可以使用，但已被弃用.

function changeElementValue(element, value) {
  element.focus();
  document.execCommand("selectAll");
  if (!document.execCommand("insertText", false, value)) {
    element.value = value;
  }
  element.dispatchEvent(new Event("change", { bubbles: true }));
}

2.用react,vue怎样开发插件

写好代码后先打包

把打包过后的css,js放在对应的文件中

更新manifest.json文件,更新default_popup,为对应的打包index.html,content_scripts中配置对应的css,js

3.在react中使用chrome.storage

•

由于在react的tsx中无法使用chrome.storage,我们需要用js单独写

•

ChromeStorage中添加对应的增删查的方法

•

chrome.storage没有需要注释一下不然会报错 // eslint-disable-next-line no-undef

•

chrome.storage.local.get方法是异步的需要使用wait new Promise() 获取返回的数据,使用方法的地方也需要wait,如:const test = wait ChromeStorage.get(”test”)

const ChromeStorage = {

    async get(key) {
        const result = await new Promise((resolve) => {
            // eslint-disable-next-line no-undef
            chrome.storage.local.get(key, resolve);
        });
        return result[key] || null;
    },

    set(obj) {
        // eslint-disable-next-line no-undef
        chrome.storage.local.set(
            obj,
            () => { }
        );
    },

    remove(key) {
        // eslint-disable-next-line no-undef
        chrome.storage.local.remove(
            key,
            () => { }
        );
    }

}


export default ChromeStorage;

有关使用上的问题，欢迎您在底部评论区留言，一起交流~

📝

1.为了在不同框架（如Vue和React）中更新输入框的值，

2.用react,vue怎样开发插件

读者评论