个人中心
gpt4 book ai didi

javascript - 使用 Angular 注入(inject)html？

转载 作者：行者123 更新时间：2023-12-03 08:58:27 30 4
gpt4 key购买 nike

我正在尝试执行此问答所说的操作:

Inject HTML into a page from a content script

这是我的脚本，它没有做任何事情。为什么不起作用？

myApp.service('pageInfoService', function() {
    this.getInfo = function(callback) {
        var model = {};

        chrome.tabs.query({'active': true},
        function (tabs) {
            if (tabs.length > 0)
            {
                model.title = tabs[0].title;
                model.url = tabs[0].url;

                chrome.tabs.sendMessage(tabs[0].id, { 'action': 'PageInfo' }, function (response) {
                    model.pageInfos = response;
                    callback(model);
                });
            }

        });
    };
});

myApp.controller("PopupController", function ($scope, pageInfoService) {

    $scope.headertitle = "Madjidi";
    $scope.text = "Here can you enable or disable the extension at any time.";
    $scope.switchMsg = "Active";
    //Add a switcher
    var switcher = $(".test.checkbox").first();
    switcher.checkbox("set checked")
    switcher.checkbox({
        onChecked: function() {
            console.log("adsaf");
            $scope.switchMsg = "Active";
            $scope.$apply();

            $.get(chrome.extension.getURL('myimportfile1.html'), function(data) {
            $($.parseHTML(data)).appendTo('body');
});

        },
        onUnchecked: function() {
            console.log("adsaf");
            $scope.switchMsg = "Unactive";
            $scope.$apply();
        }
    });

    /*
    pageInfoService.getInfo(function (info) {
        $scope.title = info.title;
        $scope.url = info.url;
        $scope.pageInfos = info.pageInfos;

        $scope.$apply();
    });
    */





});

我的html是

<!DOCTYPE html>
<html ng-app="AngularChromeEx" ng-csp>
<head>
    <link rel="stylesheet" href="/app/lib/semantic.min.css">
    <link rel="stylesheet" href="/app/css/popup.css">
    <script src="/app/lib/jquery-1.8.2.min.js"></script>
    <script src="/app/lib/angular.min.js"></script>
    <script src="/app/lib/semantic.min.js"></script>
    <script src="/app/src/app.js"></script>
    <script src="/app/src/controllers/PopupController.js"></script>
</head>
<body id="popup"> 
<div ng-controller="PopupController">
    <header>
         {{headertitle}}   <img src="https://cdn1.iconfinder.com/data/icons/user-interface-2/96/Gear-2-512.png" height="25px" width="25px">
  <form id="searchbox" class="ui form" action="connect.php" method="POST" onsubmit="return checkvalue(this)">
    <div class="control-group" style="float:left;">
      <div class="controls field" style="float:left;">
        <input type="text" id="email" name="email" placeholder="Search" class="ui input huge">
      </div>

    </div>
 <div style="float:left;;margin-left:10px;">
      <!-- Button
<button type=submit class="ui floating scrolling dropdown theme round submit button"> 
</button>-->
</div>
</form><!--
        <p>
            {{text}}
        </p>-->
    </header>

    <div class="ui test toggle checkbox">
        <input type="checkbox" name="public">
        <label>{{switchMsg}}</label>
    </div> 
        <h4>Website channels</h4>
    @aftonbladet.se
    <div class="square">

    Reader comments<br>Simon<br>Ser ljust ut för Sverige<br>Interna konflikter i Ryska landslaget<br>

</div>



</div>
</body>
</html>

我将文件 myimportfile1.html 放入我的 chrome 扩展结构中的/app 目录中。当我运行它时，来自 myimportfile1.html 的 html 没有呈现我认为应该呈现的效果。当我在浏览器中运行代码时，它会渲染除我想要注入(inject)的内容之外的所有内容。

enter image description here

这是我的 list .json:

{
    "name": "Onacci Alpha",
    "version": "0.97",
    "manifest_version": 2,

    "description": "Onacci",
    "icons": {
        "128": "icon128.png"
    },
    "background": {
      "scripts": ["app/src/background.js"]
    },
    "browser_action": {
        "default_icon": "img/defaultIcon19x19.png",
        "default_popup": "/app/src/views/PopupView.html",
        "default_title": "AngularJSChromeEx"
    },
    "content_scripts": [
        {
          "js": [ "app/lib/jquery-1.8.2.min.js", "app/src/content.js" ],
          "matches": [ "*://*/*" ],
          "run_at": "document_start"
        }
    ],
    "minimum_chrome_version": "18",
    "permissions": [ "http://*/*", "https://*/*", "unlimitedStorage", "contextMenus", "cookies", "tabs", "notifications" ],
     "web_accessible_resources": [
    "myimportfile1.html",
    "myimportfile2.html"
  ]

}

enter image description here

最佳答案

这部分代码在弹出窗口的范围内执行:

$.get(chrome.extension.getURL('myimportfile1.html'), function(data) {
        $($.parseHTML(data)).appendTo('body');
});

这意味着它尝试将其附加到弹出窗口的主体中。但您想要做的是将其附加到网站的正文中。查看消息传递教程，了解如何从您的扩展程序与您的内容页面进行通信:

https://developer.chrome.com/extensions/messaging

您还可以在 $.get() 函数中记录您收到的数据，以确保您收到了任何内容。

关于javascript - 使用 Angular 注入(inject)html？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32391263/

30 4 0
文章推荐： javascript - Ajax php验证没有功能
文章推荐： c# - C#显示线程无效的跨线程访问问题
文章推荐： java - httpTransport.call(SOAP_ACTION，信封);引发null异常Android
文章推荐： javascript - Grunt phpcs 多个任务不运行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com