Question

我尝试升级Chrome扩展程序，将网站的数据表长度更改为200而不是50。

网站上没有表格，它从“jquery.dataTables.min.js”中删除了它。文件，这就是为什么我认为我无法触发价值变化。

Chrome扩展程序的清单：

"name": "Extension",
  "version": "1.4",
  "manifest_version": 2,
  "options_page": "options.html",
  "description": "Extension",
  "permissions": [
    "<all_urls>", "tabs", "activeTab", "storage"
  ],
  "web_accessible_resources": ["insertChange.js"],
  "background": {
  "matches": [ "*://*.website.com/Index/*" ],
  "scripts" : [ "thirdParty/jquery.js", "event.js" ],
  "persistent": false
  },
    "browser_action": {
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
        "matches": [ "*://*.website.com/search/*" ],
        "css": [ "CopyPaste.css" ],
        "js": [ "thirdParty/jquery.js", "arrive.js", "loadInsertChange.js" ],
        "run_at": "document_end"
    }
  ]
}

event.js文件用于打开一些website.com/search页面，包含所需select元素的页面，并在点击扩展名＆＃39时为每个打开的选项卡运行webScript.js ; s图标：

event.js：

chrome.browserAction.onClicked.addListener(openWeb);
searchOnLoad = true;

function openWeb(url) {
    if (searchOnLoad) {
        chrome.tabs.create({url, active: false}, runSearch);
    } else {
        chrome.tabs.create({url, active: false});
    }
}
function runSearch(tab) {
    chrome.tabs.executeScript(tab.id, {file: 'search.js'});
}

加载数据表后网站的DOM：

<div class="dataTables_length" id="datatable-responsive_length">
    <label>Show 
        <select name="datatable-responsive_length" aria-controls="datatable-responsive" class="">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
     entries</label>
</div>

也许到目前为止我在这些文件中输了一个错字因为它们已被编辑，而不是完整的文件，但相信我它到目前为止工作。现在＆＃39; search.js＆＃39;在每个已打开的网站上发布的＆＃39; website.com/search /＆＃39;页面（其中包含选择框），具有以下代码：

search.js：

$(document).arrive('#datatable-responsive_previous.paginate_button.previous', function() {

    //Add more select options, works good
    select = $('#datatable-responsive_length select');
    select.append('<option value="200">200</option>');
    select.append('<option value="300">300</option>');
    select.append('<option value="500">500</option>');

    //Change select HERE
});

每当我尝试更改值并触发值后面的事件时（我正在尝试将值更改为＆＃39; 200＆＃39;将数据表的长度增加到＆＃39; 200＆＃39;），它不起作用。我能够设置值，并触发我在jquery上绑定到元素的任何更改函数，但数据表的长度不会改变。我尝试过的事情：

//Settings the append of 200 to selected, and trigger change:
    select.append('<option value="200" selected>200</option>');
    select.change();

//Applying .val() and change:
    select.val(200).change()
    OR
    select.val(200);
    select.change();

//Tried trigger('change'):
    select.val(200).trigger('change');

//Tried declaring the change function:
    select.change(function() {
        alert('Changed');
    });
    select.val(200).change();
    ** This one triggers the alert, which means the change does work, but it's not applying the data table length change.

//Tried adding the dataTable plugin to my contect scripts, but it creates a new data table on the web page and interacting with it.
  I can't use any dataTable function without adding the plugin, and I've tried declaring the pagesLength on data table options,
  and using .page.len() function but I had no luck.

//Tried some solutions on web that includes creating an event to trigger the select

所有这些解决方案在该网页中使用chrome控制台时都能正常工作，但在尝试通过扩展程序执行时却无效。我只能更改值，并触发我所做的更改功能，但不能与现有的数据表功能进行交互。我认为问题只是网站从具有外部SRC属性的脚本标签加载数据表，并且我必须将我的扩展程序与网站的功能连接起来，因为它通过chrome＆发送呼叫时可以正常工作＃39;控制台。

任何帮助都会得到满足！我一直在尝试我在网上找到的任何解决方案。无法找到如何让Chrome扩展程序与网站功能互动（我确实发现了与之相反的内容）。

EDIT1：所以我添加了两个新文件，包含该函数的insertChange，并添加到Web可访问资源中：

function selectChange(element, len) {
    element.val(len).change();
    console.log('changed!');
}

和我已添加到网页内容脚本中的loadInsertChange.js：

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.extension.getURL('insertChange.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

表现也发生了相应的变化（在顶部更新）

Answer 1

最后通过添加一个事件handeler来解决它。首先，创建了2个新文件 - insertChange.js和loadInsertChange.js。

insertChange.js：

document.addEventListener('selectChange', function (e){
    var data=e.detail;
    console.log("received "+data);
    $('#datatable-responsive_length select').val(data).change();
    //^^ This is my 'select' element. The data is the value I'm going to pass
});

还将insertChange.js添加到清单中的web_accessible_resources。

loadInsertChange.js，内容脚本，将insertChange添加到DOM：

var s = document.createElement('script');
s.src = chrome.extension.getURL('insertChange.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);
console.log('Load Insert Change Loaded');

在我的search.js中，我刚刚在insertChange中触发了插入到网站DOM中的事件：

var data= '200'; //My required value to the select element
var evt=document.createEvent("CustomEvent");
evt.initCustomEvent("selectChange", true, true, data);
document.dispatchEvent(evt);

Chrome扩展程序通过脚本SRC与网站的dataTable进行互动

1 个答案: