javascript 如何让Chrome扩展程序在我进入某个网站时自动弹出？

vltsax25 于 2023-04-04 发布在 Java

关注(0)|答案(1)|浏览(355)

我已经创建了我自己的Chrome扩展程序，在LinkedIn页面上获得ChatGPT的赞美。该扩展程序有1个manifest.json文件，1个popup.js文件和1个popup.html文件。清单文件如下：

{
  "manifest_version": 2,
  "name": "ChatGPT for LinkedIn Profile",
  "description": "The simple Chrome extension using to get compliments from the LinkedIn profile and show it to the user.",
  "version": "1.0",
  "browser_action": {
    "default_icon": "logo.png",
    "default_popup": "popup.html"
  },
  "icons": {
    "128": "logo.png"
  },
  "permissions": [
    "activeTab"
  ]
}

popup.js文件是这样的：

document.addEventListener("DOMContentLoaded", () => {
document.getElementById("ask").addEventListener('click', function(){
 
  // null here defaults to active tab of current window
  chrome.tabs.executeScript(null, {
    code: `
    var tag = document.querySelectorAll('section.artdeco-card');
    var len = tag.length;
    [
      tag[0].innerText,
      tag[1].innerText,
      tag[2].innerText,
      tag[3].innerText,
      tag[4].innerText,
      tag[5].innerText,
    ]
    `
  }, response => {
    const pageData = response[0];
    var name, about="", activity="", experience="";
........

popup.html文件是这样的：

<!DOCTYPE html>
<html>
<head>
  <title>Simple Chrome Extension</title>
  <script type="text/javascript" src="popup.js"></script>
</head>
<body style="padding:0px 10px;text-align:center;width:350px;">
  <h1>ChatGPT for Linkedin Compliments</h1>
  <hr>
  <p>This extension gives <b>three compliments</b> about the <b>LinkedIn profile</b> on the page.</p>
  <button id="ask" class="btn-ask" role="button">&nbsp;Get&nbsp;</button>
  <hr>
  <p>The compliments are:</p>
  <blockquote id="compliments" style="background:#eaf5ff;padding:5px; font-size: 12px;"></blockquote>
</body>
</html>

我想让我的扩展自动弹出，当我进入一个特定的网站。有一些关于manifest.json文件的文章如下：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "Description of my extension",
  "content_scripts": [
    {
      "matches": ["https://www.tutorialspoint.com/*"],
      "js": ["content.js"]
    }
  ]
}

但它不工作。请告诉我如何写一个manifest.json文件。谢谢。

JavaScript

来源：https://stackoverflow.com/questions/75911091/how-to-make-a-chrome-extension-pop-up-automatically-when-i-enter-a-certain-websi

1条答案

按热度按时间

gv8xihay1#

内容脚本通常用于与网页DOM的一些交互。如果你想在网页之外进行一些操作（例如扩展弹出显示），你需要使用background script。在这个脚本中，你可以通过带有URL过滤器的chrome.webNavigation.onCompleted事件监听器来监控所有打开的网页。在所有匹配的URL上，你可以使用chrome.action.openPopup()方法来显示弹出。
manifest.json：

{
  "name": "Test Extension",
  "description": "Test Extension",
  "version": "1.0",
  "manifest_version": 3,

  "permissions": ["webNavigation"],
  "action": { "default_popup": "popup.html" },
  "background": { "service_worker": "background.js" }
}

background.js：

chrome.webNavigation.onCompleted.addListener(
  async () => {
    await chrome.action.openPopup();
  },
  { url: [
    { urlMatches: 'https://example.org/' },
  ] },
);

popup.html：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test Extension</title>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

popup.js：

document.addEventListener('DOMContentLoaded', () => {
  document.body.textContent = 'This is a test.';
});

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 如何让Chrome扩展程序在我进入某个网站时自动弹出？

1条答案

相关问题

热门标签

最新问答