将 css 文件链接到 chrome 扩展名

Question

我找到了同一个问题的几个版本here , here, and here，但是当我尝试建议的解决方案时，我仍然没有成功

我注意到我只能在我当前的扩展程序中应用内联 css 规则。当我尝试将这些规则放入单独的 css 文件时，我无法将规则链接到页面上的元素。假设我的问题出在某个地方，我主要使用 manifest.json 文件。我试过仅包含 css、匹配项和 content_scripts 的 js 行。我玩过不同的权限。我最初没有 Web 可访问资源部分。

这是我的 manifest.json 文件目前的样子：

  "manifest_version": 2,
  "name": "food project",
  "version": "0.1",
  "description": "My cool extension.",
  "content_scripts": [
    {
      "css": ["./content.css"],
      "matches": ["https://www.target.com/*", "file:///*/*"],
      "js": ["./content.js"],
      "all_frames": true
    }
  ],
  "permissions": ["tabs", "*://*/*"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Demo extension",
    "default_icon": "/images/logo.png",
    "default_badge": "Media Rep"
  },
  "web_accessible_resources": ["./content.css"]

在我的 content.js 文件中：

function addButtonElement() {
  
  const newButton = document.createElement("button");
  
  newButton.textContent = "Click me";
  newButton.className = "buttonn";

  newButton.style.background = "blue"
  newButton.style.position = "relative";
  newButton.style.top = "12.5em";
  newButton.style.left = "50em";
  newButton.style.zIndex = 8000;
  newButton.style.color = "white";
  newButton.style.width = "10%";
  newButton.style.height = "30%";
  newButton.style.borderRadius = "20px";
  newButton.style.padding = "0.5em";
  newButton.style.boxSizing = "border-box";



  const currentButton = document.getElementById("headerMain");
  document.body.insertAdjacentElement("afterbegin", newButton, currentButton);

}



document.body.onload = addButtonElement;

content.css 文件:

.buttonn {
  border: solid 4px red !important;
}

我在正在运行的 js 文件中还有其他功能，就像我说的，内联 css 可以运行。不太确定为什么我似乎无法从我的 CSS 文件中获取要从该文件应用的规则。

我正在尝试的一页是 https://www.target.com/p/general-mills-cheerios-honey-nut-breakfast-cereal-19-5oz/-/A-14765766#lnk=sametab

Answer 1

已解决！（有点儿）我认为我的机器上可能存在缓存问题......？我昨天一直在处理这个问题，并在 !important 命令中添加作为我最后的步骤之一，以确保我的内联规则没有优先于 CSS.

当我今天晚上回到这个项目时，一切都成功了！走开的力量再次做到了。我是新来这里发帖的，所以不确定最佳做法是否是完全删除问题，但我很想留下来提醒其他人，休息一下有时是答案:)

上面添加到我的 manifest.json 文件中的某些行对于使用我的 .css 文件

不是必需的

这是我现在拥有的版本，它按预期工作：

{
  "manifest_version": 2,
  "name": "food project",
  "version": "0.1",
  "description": "My cool extension.",
  "content_scripts": [
    {
      "css": ["./content.css"],
      "matches": ["https://www.target.com/*"],
      "js": ["./content.js"]
    }
  ],
  "permissions": ["tabs"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Demo extention",
    "default_icon": "/images/logo.png",
    "default_badge": "Media Rep"
  }
}

将 css 文件链接到 chrome 扩展名

linking css file to chrome extension

css

google-chrome-extension