Question

所以，有一个名为Chlroine-HTTP的Firefox插件，它在每个网页的顶部放置一个警告栏，其中包含HTTP，而不是HTTPS。

但问题是它与网站重叠，只是一点点，但这很烦人。

我想这样做，以便它不会与网站重叠，网站内容（包括网站导航栏）显示在氯-HTTP警告下方。

问题是SO上的其他答案是关于手动将HTML正文部分转换为div，如标题和内容等。

然而，在插件中必须将其注入每个网页的HTML中，我必须自动执行此处理，而不是手动编辑HTML。

以下是代码：

的src / hacks.js

/* globals browser */

const t = browser.i18n.getMessage;

const removeWarnings = () => {
  const warnings = document.getElementsByClassName('chlorine-http-warning');
  for (const w of warnings) {
    document.body.removeChild(w);
  }
};

const addWarning = () => {
  if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
    return;
  }

  const warning = document.createElement('div');
  const info = document.createElement('a');
  info.href = t('link');
  info.innerText = t('insecure');
  warning.append(info);
  warning.append('  ');

  const newLink = document.createElement('a');
  newLink.href = window.location.href.replace('http://', 'https://');
  newLink.innerText = t('trySecure');
  warning.append(newLink);
  warning.append('  ');

  const closeLink = document.createElement('a');
  closeLink.innerText = t('close');
  closeLink.style = { cursor: 'pointer' };
  closeLink.onclick = () => {
    document.body.removeChild(document.getElementsByClassName('chlorine-http-warning')[0]);
  };
  warning.append(closeLink);

  warning.className = 'chlorine-http-warning';

  document.body.append(warning);
};

removeWarnings();
addWarning();

这是CSS

的src / style.css中

.chlorine-http-warning {
  background-color: red;
  padding: 4px;
  position: fixed;
  color: white !important;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  top: 3px;
  width: 96%;
  left: 2%;
  text-align: center;
  z-index: 2147483647;

  height: 50px;
  width: 100%;

}

.chlorine-http-warning a {
  text-decoration: underline;
  color: #FFF;
}

.chlorine-http-warning a:hover {
  text-decoration: underline;
  color: #BBB;
  cursor: pointer;
}

非重叠的导航栏注入网页

0 个答案: