用于Chrome扩展程序的Javascript

Question

我正在尝试在页面上创建一个按钮

我的manifest.json有内容脚本inject.js 和inject.js就像这样

var botao_comunidades = document.querySelector('a[href="#Communities"]');

var botao_teste = document.createElement('p');
botao_teste.innerHTML = '<a href="#">Test</a>';
botao_teste.className = "themeLightTransparency NSC";
botao_comunidades.insertAdjacentElement('afterend',p);

的manifest.json

{
"name": "Teste",
"version": "0.0.1",
"manifest_version": 2,
"description": "Teste",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"permissions": [
"<all_urls>"
],
"content_scripts": [
{
  "matches": [
    "https://www.orkut.com.br/*"
  ],
  "js": [
    "src/inject/inject.js"
  ]
  ]
 }
]
}

它什么也没做 ：（

Answer 1

从您的清单中删除关闭content_scripts.js的额外]（如果您想要使这个确切的代码工作，最后会提到一些其他步骤）。然后，当我加载您的脚本时，网站上的控制台在第6行显示Uncaught ReferenceError: p is not defined。将最后一行更改为botao_comunidades.insertAdjacentElement('afterend',botao_teste);，一切正常。

使此确切代码工作的其他步骤：

• 从清单
中删除“icons”和“default_locale”
• 将content_script.matches更改为“http://www.orkut.com.br/ *”
• 将inject.js的第一行更改为使用querySelector('#signUpViewport’);

---

这是成品：

的manifest.json：

{
    "name": "Teste",
    "version": "0.0.1",
    "manifest_version": 2,
    "description": "Teste",
    "permissions": [
    "<all_urls>"
    ],
    "content_scripts": [
    {
        "matches": [
        "http://www.orkut.com.br/*"
        ],
        "js": [
        "src/inject/inject.js"
        ]
    }
    ]
}

的src /注射/ inject.js：

var botao_comunidades = document.querySelector('#signUpViewport');

var botao_teste = document.createElement('p');
botao_teste.innerHTML = '<a href="#">Test</a>';
botao_teste.className = "themeLightTransparency NSC";
botao_comunidades.insertAdjacentElement('afterend',botao_teste);

屏幕截图（“测试”位于左下角）：

---

现在轮到你对它的工作方式有了更多的描述。