Question

我尝试将Chrome扩展程序加载到iframe而不是弹出窗口中。用户点击扩展程序图标后，该扩展程序会在其中创建带有popup.html的iframe。用户再次点击分机图标后，iframe就会消失。

此行为需要适用于每个标签。

但是，当用户在标签之间切换并且他/她点击扩展图标时，操作会重复多次。

如何实现正常流程？

用户点击扩展程序图标 - ＆gt;在iframe中显示扩展程序弹出窗口
用户再次点击扩展图标 - ＆gt;隐藏扩展程序弹出窗口
用户切换到另一个标签，然后点击扩展图标 - ＆gt;在iframe中显示扩展程序弹出窗口 ......等等。

这是我的代码：

背景

function togglePlugin (tab) {
  chrome.tabs.executeScript(tab.ib, {
    file: 'scripts/inject.js'
  })
};

chrome.browserAction.onClicked.addListener(togglePlugin)

inject.js

function toggleVisisbility (node) {
  console.log(node.style.display)
  node.style.display = (node.style.display === 'none' || node.style.display === '') ? 'block' : 'none'
}

function appendIframe(app) {
  var iframe = document.createElement('iframe')
  // Must be declared at web_accessible_resources in manifest.json
  iframe.src = chrome.runtime.getURL('popup.html')

  // Some styles for a fancy sidebar
  iframe.style.cssText = 'position:fixed;top:0;right:0;display:block;' +
                         'width:380px;height:575px;z-index:99999999;' +
                         'border: none;' + 
                         'box-shadow: 0px 8px 16px rgba(0,0,0,0.25);'
  app.appendChild(iframe)
}

function insertIframe(anchor) {
  let app = Array.from(anchor.childNodes).find(function(node){ return node.id === 'popup-app'})

  if (app) {
    if (app.querySelectorAll('iframe').length === 0) {
      // app.innerHTML = ''
      appendIframe(app)
    }
    toggleVisisbility(app)
  }
}

var extensionOrigin = 'chrome-extension://' + chrome.runtime.id
if (!location.ancestorOrigins.contains(extensionOrigin)) {
  var anchor = document.getElementById('app-anchor')
  console.log(anchor)
  if (anchor) {
    insertIframe(anchor)
  } else {
    const AppRoot = document.createElement('div', { id: 'app-anchor' });
    AppRoot.id = 'app-anchor';
    const body = document.getElementsByTagName('body')[0];
    body.appendChild(AppRoot);

    AppRoot.innerHTML = '<div style="display: none" id="popup-app"></div>';
    insertIframe(AppRoot)
  }
}

contentscript.js

window.addEventListener('load', () => {
  const AppRoot = document.createElement('div', { id: 'app-anchor' });
  AppRoot.id = 'app-anchor';
  const body = document.getElementsByTagName('body')[0];
  body.appendChild(AppRoot);

  AppRoot.innerHTML = '<div style="display: none" id="popup-app"></div>';
});

的manifest.json

{
  ...
  "default_locale": "en",
  "background": {
    "scripts": [
      "scripts/chromereload.js",
      "scripts/background.js"
    ]
  },
  "permissions": [
    "management",
    "tabs",
    "activeTab",
    "<all_urls>",
    "background",
    "storage",
    "notifications",
    "contextMenus"
  ],
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }
  ],
  "browser_action": {
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    },
    "default_title": "__MSG_appName__"
    // "default_popup": "popup.html"
  },
  "web_accessible_resources": [
    "popup.html",
    "scripts/inject.js"
  ],
  ...
}

如何在browserAction单击事件上使用chrome扩展来切换元素可见性

0 个答案: