繁体   English   中英

在Chrome扩展程序中运行Javascript - >基本?

[英]Run Javascript in Chrome Extension -> Basic?

我觉得我错过了一些非常明显的东西,但我一直在寻找各处,似乎无法使这项工作成功。 简而言之,我想将一个小的Javascript脚本转换为chrome扩展,以使其更易于使用。

该脚本只是从textArea读取文本,修改脚本并将其输出到div中。 它在独立运行时可以与任何浏览器完美配合,但在作为Chrome扩展程序运行时似乎不想工作

这是文件(我基本上试图转换示例):

谢谢!

的manifest.json

    {
  "manifest_version": 2,

  "name": "One-click Kittens",
  "description": "This extension demonstrates a 'browser action' with kittens.",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "https://secure.flickr.com/"
  ]
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        min-width: 357px;
        overflow-x: hidden;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 75px;
        height: 75px;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
     -->
    <script src="popup.js"></script>
  </head>
  <body>

    <textarea id="source">Text Entry.</textarea>
    <button onclick="main()" id="buttons">Generate</button>

    <div id="result">       
    </div>

  </body>
</html>

popup.js

function main() {
    var source = document.getElementById('source').value;
    document.getElementById("result").innerHTML = source;
}

根据chrome扩展文档,

内联JavaScript将不会被执行。 此限制禁止内联<script>块和内联事件处理程序(例如<button onclick="..."> )。

阅读: http//developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution

在popup.js中用作

document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('button').addEventListener('click', main);      
});
function main() {
    var source = document.getElementById('source').value;
    document.getElementById("result").innerHTML = source;
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM