vue项目打开新的tab页面实现自动登录

我们自己有一个vue项目，想在这个项目里面打开一个新的页面，这个新的页面是另外一个系统的网页，需要登录，我们想通过我们网站跳转过去，然后自动填写另外一个网站的账号，密码，点击登录，全部过程都是自动的。

下面是实现您需求的大致步骤：

1. 创建一个Chrome插件项目，包括清单文件（manifest.json）和内容脚本文件（content.js）。

2. 在清单文件（manifest.json）中配置插件的权限和内容脚本：

```json
{
  "manifest_version": 2,
  "name": "自动登录插件",
  "version": "1.0",
  "description": "自动填写账号密码并登录的插件",
  "permissions": ["tabs", "activeTab"],
  "content_scripts": [
    {
      "matches": ["https://your-vue-website.com/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}
```

在上述清单文件中，我们声明了需要的权限（`"tabs"`和`"activeTab"`），并将`content.js`脚本注入到您的Vue项目的网页中。

3. 编写内容脚本文件（content.js），用于在您的Vue网页加载完成后进行自动填写账号密码并登录的操作：

```javascript
document.addEventListener('DOMContentLoaded', function() {
  // 在这里执行自动登录的操作
  // 获取账号、密码输入框元素，并填写相应的值
  // 获取登录按钮元素，并模拟点击事件进行登录
});
```

在上述代码中，您需要根据您登录页面的具体情况，使用JavaScript操作获取账号和密码输入框的元素，并填写对应的值。然后，获取登录按钮的元素，并模拟点击事件进行登录。

4. 在背景脚本文件（background.js）中监听来自Vue项目的消息，并将消息传递给内容脚本：

```javascript
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'login') {
    // 将账号、密码等信息传递给内容脚本
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      var tab = tabs[0];
      chrome.tabs.sendMessage(tab.id, { action: 'login', username: request.username, password: request.password });
    });
  }
});
```

在上述代码中，我们使用`chrome.runtime.onMessage`方法监听来自Vue项目的消息，当收到登录请求时，将账号、密码等信息传递给内容脚本。

5. 在您的Vue项目中，通过Chrome插件的API发送登录请求消息给背景脚本：

```javascript
chrome.runtime.sendMessage({ action: 'login', username: 'your_username', password: 'your_password' });
```

在上述代码中，您需要将`your_username`和`your_password`替换为实际的账号和密码。

这样，当您的Vue项目中调用上述代码时，插件会打开新页面，自动填写账号、密码并进行登录操作。