# inject-script 指的是通过DOM操作的方式向页面注入的一种JS。 ``` <pre class="calibre10">``` <span class="token3">{</span> <span class="token">// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的</span> <span class="token2">"web_accessible_resources"</span><span class="token3">:</span> <span class="token3">[</span><span class="token2">"js/inject.js"</span><span class="token3">]</span><span class="token3">,</span> <span class="token3">}</span> ``` ``` 因为`content-script`有一个很大的“缺陷”，也就是无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它，也就是无法在DOM中通过绑定事件的方式调用`content-script`中的代码（包括直接写`onclick`和`addEventListener`2种方式都不行），但是，“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求，那该怎么办呢？其实这就是本小节要讲的。 在`content-script`中通过DOM方式向页面注入`inject-script`代码示例： ``` <pre class="calibre17">``` <span class="token">// 向页面注入JS</span> <span class="token5">function</span> <span class="token4">injectCustomJs</span><span class="token3">(</span>jsPath<span class="token3">)</span> <span class="token3">{</span> jsPath <span class="token1">=</span> jsPath <span class="token1">||</span> <span class="token2">'js/inject.js'</span><span class="token3">;</span> var temp <span class="token1">=</span> document<span class="token3">.</span><span class="token4">createElement</span><span class="token3">(</span><span class="token2">'script'</span><span class="token3">)</span><span class="token3">;</span> temp<span class="token3">.</span><span class="token4">setAttribute</span><span class="token3">(</span><span class="token2">'type'</span><span class="token3">,</span> <span class="token2">'text/javascript'</span><span class="token3">)</span><span class="token3">;</span> <span class="token">// 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js</span> temp<span class="token3">.</span>src <span class="token1">=</span> chrome<span class="token3">.</span>extension<span class="token3">.</span><span class="token4">getURL</span><span class="token3">(</span>jsPath<span class="token3">)</span><span class="token3">;</span> temp<span class="token3">.</span>onload <span class="token1">=</span> <span class="token5">function</span><span class="token3">(</span><span class="token3">)</span> <span class="token3">{</span> <span class="token">// 放在页面不好看，执行完后移除掉</span> this<span class="token3">.</span>parentNode<span class="token3">.</span><span class="token4">removeChild</span><span class="token3">(</span>this<span class="token3">)</span><span class="token3">;</span> <span class="token3">}</span><span class="token3">;</span> document<span class="token3">.</span>head<span class="token3">.</span><span class="token4">appendChild</span><span class="token3">(</span>temp<span class="token3">)</span><span class="token3">;</span> <span class="token3">}</span> ``` ```