javascript - 网页上不同 div/span 的不同选择颜色

Question

我正在尝试构建一个 Chrome 插件，允许用户在新闻网站上选择文本并单击Share按钮将该信息发送到服务器。当用户从故事中选择文本时，我会应用一种颜色。单击按钮时，插件会识别选择的字符数是否超过 280。如果超过，则会显示警告消息，同时应该使用不同的颜色选择溢出的文本。后者没有发生。这是内容脚本中的代码：

var article_selected_text = window.getSelection().toString();
if (length > 280) {
  sel = window.getSelection();
  if (sel.rangeCount && sel.getRangeAt) {
    range = sel.getRangeAt(0);
  }
  document.designMode = "on";

  var overflowRange = document.createRange();
  overflowRange.setStart(sel.anchorNode, sel.anchorOffset + 280);
  overflowRange.setEnd(sel.focusNode, sel.focusOffset);
  var newNode = document.createElement("span");
  newNode.setAttribute('class', 'overflow-selection');
  overflowRange.surroundContents(newNode);
  
  document.designMode = "off";
}

这是用于选择的CSS：

::selection {
  background: #E2F4D3;
} 
.overflow-selection::selection {
  background: #E5E5E5;
} 

overflowRange单击按钮时，不会立即看到的选择颜色。但是，如果再次选择相同的文本，最多 280 个字符的文本会被选中，#E2F4D3其余的会被选中#E5E5E5。为简洁起见，假设一次只选择一个或更少的段落。

标签： javascriptcssgoogle-chrome-extension