让谷歌插件单独一个窗口运行

admin管理员组

文章数量:1130349

示例

一、manifest.json配置默认popup，其中host_permissions属性可用于跨域请求，就是当前端请求后端接口时可能会出现跨域的情况，然后将接口域名部分加到host_permissions就可以了，多个用逗号隔开。

{
  "manifest_version": 3,
  "name": "插件测试",
  "description": "将Vue项目放到插件插件中运行",
  "version": "0.0.1",
  "icons": {
    "16": "statics/imgs/favicon_16.png",
    "36": "statics/imgs/favicon_36.png",
    "48": "statics/imgs/favicon_48.png",
    "128": "statics/imgs/favicon_128.png"
  },
  "action": {
    "default_icon": {
      "16": "statics/imgs/favicon_16.png",
      "36": "statics/imgs/favicon_36.png",
      "48": "statics/imgs/favicon_48.png",
      "128": "statics/imgs/favicon_128.png"
    },
    "default_popup": "views/popup.html"
  },
  "host_permissions": ["https://example/index.php", "https://www.baidu"],
  "content_security_policy": {
    "extension_pages": "style-src 'self' 'unsafe-inline';script-src 'self'; object-src 'self' ;",
    "sandbox": "sandbox allow-scripts; script-src 'self'; object-src 'self' " 
  }
}

二、popup执行脚本

<!-- 目前仅仅是为了执行脚本 -->
<script src="../js/index.js"></script>

三、index.js脚本打开新的popup

// 当脚本被执行时
window.onload = () => {
    openpage();
    function openpage() {
        // 获取当前窗口
        chrome.windows.getCurrent((currentWindow) => {
            // 聚焦一下当前窗口，主要是为了关闭popup
            chrome.windows.update(currentWindow.id, { focused: true });
            // 默认宽高和位置
            let newWindowWidth = 1024;
            let newWindowHeight = 600;
            let newWindowLeft = currentWindow.left + currentWindow.width - newWindowWidth;
            let newWindowTop = 0;
            
            chrome.windows.create({
                url: "../views/dist/index.html", // 一个Vue项目打包后的入口文件
                type: "popup",
                width: newWindowWidth,
                height: newWindowHeight,
                left: newWindowLeft,
                top: newWindowTop
            }, (createdWindow) => {
                // 聚焦到新窗口
                chrome.windows.update(createdWindow.id, { focused: true });
            });
        })
    }
}

四、完整代码：Qmagician/extensionsSingleWindow (gitee)https://gitee/qmagician/extensions-single-window

示例

一、manifest.json配置默认popup，其中host_permissions属性可用于跨域请求，就是当前端请求后端接口时可能会出现跨域的情况，然后将接口域名部分加到host_permissions就可以了，多个用逗号隔开。

{
  "manifest_version": 3,
  "name": "插件测试",
  "description": "将Vue项目放到插件插件中运行",
  "version": "0.0.1",
  "icons": {
    "16": "statics/imgs/favicon_16.png",
    "36": "statics/imgs/favicon_36.png",
    "48": "statics/imgs/favicon_48.png",
    "128": "statics/imgs/favicon_128.png"
  },
  "action": {
    "default_icon": {
      "16": "statics/imgs/favicon_16.png",
      "36": "statics/imgs/favicon_36.png",
      "48": "statics/imgs/favicon_48.png",
      "128": "statics/imgs/favicon_128.png"
    },
    "default_popup": "views/popup.html"
  },
  "host_permissions": ["https://example/index.php", "https://www.baidu"],
  "content_security_policy": {
    "extension_pages": "style-src 'self' 'unsafe-inline';script-src 'self'; object-src 'self' ;",
    "sandbox": "sandbox allow-scripts; script-src 'self'; object-src 'self' " 
  }
}

二、popup执行脚本

<!-- 目前仅仅是为了执行脚本 -->
<script src="../js/index.js"></script>

三、index.js脚本打开新的popup

// 当脚本被执行时
window.onload = () => {
    openpage();
    function openpage() {
        // 获取当前窗口
        chrome.windows.getCurrent((currentWindow) => {
            // 聚焦一下当前窗口，主要是为了关闭popup
            chrome.windows.update(currentWindow.id, { focused: true });
            // 默认宽高和位置
            let newWindowWidth = 1024;
            let newWindowHeight = 600;
            let newWindowLeft = currentWindow.left + currentWindow.width - newWindowWidth;
            let newWindowTop = 0;
            
            chrome.windows.create({
                url: "../views/dist/index.html", // 一个Vue项目打包后的入口文件
                type: "popup",
                width: newWindowWidth,
                height: newWindowHeight,
                left: newWindowLeft,
                top: newWindowTop
            }, (createdWindow) => {
                // 聚焦到新窗口
                chrome.windows.update(createdWindow.id, { focused: true });
            });
        })
    }
}

四、完整代码：Qmagician/extensionsSingleWindow (gitee)https://gitee/qmagician/extensions-single-window

本文标签： 插件窗口让谷歌