Question

我当前正在创建一个chrome扩展名，我能够创建popup.html，并且工作正常，我也可以为其添加一些身份验证机制，并且可以按预期工作。但是，我目前正在设法实现某些目标，但首先让我解释一下扩展的功能

当我访问内容脚本运行的特定链接/站点时，它会在div类“ .Post”所在的任何位置附加一个按钮，然后向该按钮添加事件监听器，以发送信息（例如帖子标题）， URL和帖子的作者等。现在需要帮助的地方。

是否有可能在单击按钮时打开Popup.html并将这些信息发送到popup.html。

到目前为止，这是我的代码。

content-script.js

$('.Post').append('<button id="the_id" class="add_archive_btn"> Add Archive </button>');
$('body').append('<style> .add_archive_btn { background: #ed665c; border: 0; border-radius: 3px; color: white; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; padding: 10px 20px; font-size: 13px; } </style>')
$('body').append('<script>function processData(){ alert("hi");}</script>')

Script.js

$(document).ready(function(){
    whatToShow();
});

var userExtensionKey = 'blabla';

function whatToShow(){
    var data = localStorage.getItem(userExtensionKey);
    if(data !== null){
        $('.login_form').hide();
        $('.logged_in_layout').show();
    } else {
        $('.login_form').show();
        $('.logged_in_layout').hide();
    }
    
    
}

$('#revoked_access').on('click', function (event) {
    event.preventDefault();
    localStorage.removeItem(userExtensionKey);
    $('.logged_in_layout').hide();
    $('.login_form').show();
});
                      
$('#click_action').on('submit', function (event) {
    event.preventDefault();
    $.ajax({
        url: "http://127.0.0.1:8000/api/login"
        , type: 'POST'
        , data: {
            email: $('#lead_email').val(),
            password: $('#lead_password').val()
        }
        , dataType: 'json', // added data type
        success: function (res) {
            parseLogin(res)
        }
        , error: function (error) {
            printErrorMsg(error.responseJSON.error)
        }
    });
});

function printErrorMsg(msg) {
    console.log(msg);
    if (msg !== undefined) {
        var objt = Object.keys(msg);
        if (jQuery.inArray('email', objt) == "-1") {
            $('#email_input_filed').html('');
        } else {
            $('#email_input_filed').html('<div class="show_error_text">' + msg['email'][0] + '</div>');
        }
        
        if (jQuery.inArray('password', objt) == "-1") {
            $('#password_input_filed').html('');
        } else {
            $('#password_input_filed').html('<div class="show_error_text">' + msg['password'][0] + '</div>');
        }
        
        if (jQuery.inArray('loginfailed', objt) == "-1") {
            $('#login_failed').html('');
        } else {
            $('#login_failed').html('<div class="show_error_text_2">' + msg['loginfailed'][0] + '</div>');
        }
    }
}

function parseLogin(){
    // save login username
    localStorage.setItem(userExtensionKey, $('#lead_email').val());
    $('#lead_email').val('');
    $('#lead_password').val('')
    $('.login_form').hide();
    $('.logged_in_layout').show();
    console.log('saved user details succesfully');
}

Manifest.json

{
  "name": "Hello Extensions",
  "permissions": [
    "http://127.0.0.1:8000/",
    "activeTab", 
      "tabs",
      "storage"
  ],
  "description" : "Base Level Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "manifest_version": 2,
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }, 
  "background": {
    "scripts": ["/js/background_script.js"],
    "persistent": false
  },    
  "content_scripts" : [
     {
      "matches": ["<all_url>"],
      "js": ["/js/jquery.min.js", "/js/content-script.js"],
      "permissions": [
          "activeTab", 
          "tabs",
          "storage"
        ]
     }
  ]
}

请忽略background.js脚本，该脚本当前为空白，里面没有任何内容，我们将不胜感激。谢谢。

Chome扩展-以编程方式触发弹出窗口

0 个答案: